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 i migliori amici 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 personalizza 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à un strumento di apprendimento gratuito per sviluppatori di frontend chi vuole capire 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 sezioni differenti 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 la strada.
È 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 di piccole dimensioni sottostante.
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 capire visivamente in che modo le proprietà della griglia CSS influiscono sugli 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.
