Quando crei un'applicazione web, una delle prime cose di cui hai bisogno è un modo per definire il layout dei contenuti dell'app.
Molti designer utilizzano griglie immaginarie per disporre i contenuti, che si tratti di un sito o di un'app. Il gruppo di CSS si sta impegnando molto per semplificare i layout e, nell'ambito di questo, ha prodotto il Modulo layout griglia CSS, che ora sta emergendo nei browser.
È possibile provare questa funzionalità in Chrome con un flag sperimentale. È inoltre implementato in IE a partire dalla versione 10 e probabilmente sarà disponibile a breve nella maggior parte dei browser.
Riepilogo esecutivo
- Il layout a griglia CSS ti consente di definire righe e colonne per il tuo layout
- Le griglie possono adattarsi per sfruttare lo spazio disponibile
- L'ordine dei contenuti può essere indipendente dall'ordine di visualizzazione dei contenitori della griglia
- I layout possono cambiare in base alle query supporti, semplificando così il responsive design
- I contenuti possono sovrapporsi (abilitando un layout impossibile con altri metodi)
- Il layout a griglia è veloce
Ecco un video introduttivo che spiega molto come funziona il layout a griglia CSS (le slide sono qui:
Provalo
Ora è facile usare il layout a griglia CSS in Chrome. Per prima cosa devi attivare il flag sperimentale per abilitare la funzionalità.
Innanzitutto carica l'URL chrome://flags e scorri verso il basso fino all'opzione Attiva le funzionalità sperimentali della piattaforma web come mostrato di seguito:
Fai clic su Abilita per attivare il flag. Dovresti visualizzare una richiesta di riavvio del browser simile alla seguente:
Ora fai clic sul pulsante Riavvia ora per riavviare il browser e potrai provare il layout griglia CSS.
Facci sapere la tua opinione
CSS Grid Layout è un'ottima nuova primitiva per i contenuti web, ma come al solito siamo tutti ansiosi di sapere cosa ne pensano gli sviluppatori. Ci sono molti modi per fornire un feedback: lascia un commento qui, invia un'email all'elenco del gruppo di lavoro CSS di W3C con "[css-grid]" nella riga dell'oggetto, registra i bug o pubblica un blog e twitta ciò che pensi. Non vediamo l'ora di vedere gli ottimi layout che creerai con questa nuova utilissima funzionalità.