Quando crei un'applicazione web, una delle prime cose di cui hai bisogno è la disposizione 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 è impegnato a fondo per semplificare i layout e, di conseguenza, ha prodotto il Modulo di layout griglia CSS che sta emergendo nei browser.
Questa funzionalità è disponibile per la prova in Chrome dietro un flag sperimentale. Inoltre, è stato implementato in IE dalla versione 10 e sarà presto disponibile nella maggior parte dei browser.
Riepilogo esecutivo
- Layout 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 del contenitore della griglia
- I layout possono cambiare in base alle query supporti, semplificando la progettazione adattabile
- I contenuti possono sovrapporsi (attivazione del layout impossibile con altri metodi)
- Layout griglia veloce
Ecco un video introduttivo che fornisce molte spiegazioni sul funzionamento del layout griglia CSS (le slide sono disponibili qui:
Prova
Ora è facile utilizzare il layout griglia CSS in Chrome. Per prima cosa, attiva 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 e dovresti visualizzare una richiesta di riavvio del browser, simile alla seguente:
Ora fai clic sul pulsante Riavvia ora per riavviare il browser e potrai iniziare a provare il layout griglia CSS.
Facci sapere la tua opinione
Il layout griglia CSS è una nuova utilissima funzione primitiva per i contenuti web, ma, come sempre, siamo tutti entusiasti di sapere cosa ne pensano gli sviluppatori. Ci sono molti modi per fornire il tuo feedback: lascia un commento qui, invia un'email all'elenco di W3C CSS Working Group con "[css-grid]" nella riga dell'oggetto, registra i bug del blog o invia un tweet con la tua opinione. Non vediamo l'ora di scoprire i fantastici layout che realizzerai con questa nuova utilissima funzionalità.