Quando crei un'applicazione web, una delle prime cose di cui hai bisogno è un modo per disporre i contenuti dell'app.
Molti designer utilizzano griglie immaginarie per disporre i contenuti, che si tratti di un sito o di un'app. Il gruppo CSS si è impegnato a semplificare i layout e, nell'ambito di questo impegno, ha prodotto il modulo CSS Grid Layout, che ora sta emergendo nei browser.
Questa funzionalità è disponibile per la prova in Chrome dietro un flag sperimentale. È stato implementato anche in IE dalla versione 10 e probabilmente a breve sarà disponibile nella maggior parte dei browser.
Riepilogo esecutivo
- Il layout a griglia CSS ti consente di definire righe e colonne per il layout
- Le griglie possono adattarsi per utilizzare 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 sui media, semplificando il responsive design
- I contenuti possono sovrapporsi (consentendo un layout impossibile con altri metodi)
- Il layout a griglia è veloce
Ecco un video di panoramica che spiega molto bene come funziona il layout a griglia CSS (le diapositive sono qui:
Prova
Ora è facile utilizzare la funzionalità CSS Grid Layout in Chrome. Per prima cosa, devi attivare il flag sperimentale per attivare la funzionalità.
Innanzitutto, carica l'URL chrome://flags e scorri verso il basso fino all'opzione Attiva funzionalità sperimentali della piattaforma web, come mostrato di seguito:
Basta fare clic su Attiva per attivare il flag. Dovresti visualizzare una richiesta di riavvio del browser simile alla seguente:
Ora non devi fare altro che fare clic sul pulsante Riavvia ora per riavviare il browser e potrai provare la funzionalità CSS Grid Layout.
Facci sapere la tua opinione
CSS Grid Layout è un'ottima nuova funzionalità per i contenuti web, ma come sempre siamo curiosi di sapere cosa ne pensano gli sviluppatori. Esistono molti modi per fornire feedback: lascia un commento qui, invia un'email all'elenco del gruppo di lavoro CSS del W3C con "[css-grid]" nella riga dell'oggetto, registra i bug o pubblica un post sul blog e un tweet per esprimere la tua opinione. Non vediamo l'ora di vedere i fantastici layout che creerai con questa nuova funzionalità molto utile.