Scopri come funzionano le proprietà della griglia CSS con Griddy.io

Se segui la tecnologia del web design, dovresti conoscere le griglie CSS. Queste proprietà sono nuove aggiunte al formato CSS3 e stanno rapidamente diventando il migliore amico di uno sviluppatore.

Di recente abbiamo coperto un gioco divertente per aiutarti ad apprendere le proprietà della griglia CSS, ma i giochi non sempre insegnano idee pratiche. Ecco dove Griddy potrebbe essere più utile.

Questa webapp gratuita ti consente di personalizzare le griglie in tempo reale e aggiorna gli snippet dal vivo sulla pagina. È possibile fare confusione con la propria griglia personalizzata definendo colonne, grondaie e margini e ristrutturare la pagina per scoprire come funzionano le proprietà della griglia.

Griddy è in realtà uno strumento di apprendimento gratuito creato per gli sviluppatori di frontend che desiderano saperne di più sulle griglie CSS.

Con questa webapp puoi aggiungere nuovi oggetti nella griglia, rimuovere altri elementi e ridimensionarli per adattarli a qualsiasi layout tu voglia.

La webapp ha diverse sezioni con diversi campi di input per modificare le proprietà della griglia. Questi ti permettono di riformattare le righe / colonne della griglia e ti insegnano esattamente quello che stai facendo lungo il percorso.

È possibile definire gli spazi tra le colonne, allineare gli elementi della griglia e giocare con le impostazioni di giustificazione, tutto attraverso questi campi modulo. Ogni volta che apporti una modifica, aggiornerà automaticamente l'anteprima e lo snippet di codice piccolo sotto.

In questo modo puoi semplicemente copiare e incollare il CSS nel tuo foglio di stile se vuoi fare un ulteriore lavoro. Molto carino!

Griddy potrebbe non essere divertente come Grid Garden ma Griddy è un modo pratico per imparare e comprendere visivamente in che modo le proprietà della griglia CSS influenzano gli elementi della pagina.

Per giocare con esso basta visitare la homepage di Griddy. Puoi anche condividere i tuoi pensieri o domande con il creatore su Twitter @drewisthe.