TL;DR
Se hai familiarità con Flexbox, Grid dovrebbe esserti di aiuto. Rachel Andrew gestisce un ottimo sito web dedicato a CSS Grid per aiutarti a iniziare. La griglia è ora disponibile in Google Chrome.
Flexbox? Griglia?
Negli ultimi anni, CSS Flexbox è stato ampiamente utilizzato e il supporto dei browser sembra davvero ottimo (a meno che tu non sia tra i poveri che devono supportare IE9 e versioni precedenti). Flexbox ha semplificato molte attività di layout complesse, come la spaziatura equilibrata tra gli elementi, i layout dall'alto verso il basso o il sacro graal della magia CSS: il centramento verticale.
Purtroppo, di solito gli schermi hanno una seconda dimensione di cui preoccuparsi. A parte il fatto di occuparti personalmente del dimensionamento degli elementi, purtroppo non puoi avere sia un ritmo verticale che orizzontale usando solo flexbox. È qui che entra in gioco CSS Grid.
CSS Grid è in fase di sviluppo, preceduto da un flag nella maggior parte dei browser da oltre 5 anni e abbiamo dedicato del tempo aggiuntivo all'interoperabilità per evitare il lancio di bug come Flexbox. Pertanto, se utilizzi la griglia per implementare il layout in Chrome, è probabile che il risultato sia lo stesso anche in Firefox e Safari. Al momento della stesura di questo documento, l'implementazione Edge di Microsoft di Grid non è aggiornata (la stessa cosa già presente in IE11) e l'aggiornamento è "in considerazione".
Nonostante le analogie a livello di concetto e sintassi, Flexbox e Grid non siano paragonabili a tecniche di layout concorrenti. La griglia è organizzata in due dimensioni, mentre Flexbox in una sola. I due prodotti si integrano perfettamente tra loro.
Definizione di una griglia
Per familiarizzare con le singole proprietà di Grid, consiglio vivamente Grid By Example di Rachel Andrew o Cheat Sheet di CSS Tricks. Se conosci Flexbox, molte delle proprietà e il loro significato dovrebbero esserti familiari.
Diamo un'occhiata a un layout standard a griglia a 12 colonne. Il classico layout a 12 colonne è molto diffuso perché il numero 12 è divisibile per 2, 3, 4 e 6 ed è pertanto utile per molti progetti. Implementiamo questo layout:
Iniziamo con il nostro codice di markup:
<!DOCTYPE html>
<body>
<header></header>
<nav></nav>
<main></main>
<footer></footer>
</body>
Nel nostro foglio di stile iniziamo espandendo body in modo che copra l'intera area visibile e trasformandolo in un container griglia:
html, body {
width: 100vw;
min-height: 100vh;
margin: 0;
padding: 0;
}
body {
display: grid;
}
Ora utilizziamo la griglia CSS. Ottimo.
Il passaggio successivo consiste nell'implementare le righe e le colonne della griglia. Potremmo implementare tutte e 12 le colonne nel modello, ma dato che non ne utilizziamo tutte le colonne, ciò renderebbe il nostro CSS inutilmente disordinato. Per semplicità, implementeremo il layout nel seguente modo:
L'intestazione e il piè di pagina hanno una larghezza variabile, mentre i contenuti sono variabili in entrambe le dimensioni. La navigazione sarà variabile anche in entrambe le dimensioni, ma imporremo una larghezza minima di 200 px. (Perché? per illustrare le funzionalità della griglia CSS, ovviamente.
Nella griglia CSS, l'insieme di colonne e righe è chiamato tracce. Iniziamo definendo il nostro primo insieme di tracce, le righe:
body {
display: grid;
grid-template-rows: 150px auto 100px;
}
grid-template-rows richiede una sequenza di dimensioni che definiscono le singole righe.
In questo caso, assegniamo alla prima riga un'altezza di 150 px e l'ultima di 100 px.
La riga centrale è impostata su auto, il che significa che si adatterà all'altezza necessaria
per ospitare gli elementi della griglia (gli elementi secondari del container griglia)
nella riga in questione. Poiché il nostro corpo è allungato sull'intera area visibile, la traccia contenente i contenuti (giallo nella foto sopra) riempirà almeno tutto lo spazio disponibile, ma crescerà (e farà scorrere il documento) se necessario.
Per le colonne vogliamo adottare un approccio più dinamico: vogliamo che sia la navigazione che i contenuti aumentano (e si restringono), ma vogliamo che la navigazione non venga mai ridotta al di sotto di 200 px e che i contenuti siano più grandi di nav. In Flexbox useremo flex-grow e flex-shrink, ma in Grid è un po' diverso:
body {
display: grid;
grid-template-rows: 150px auto 100px;
grid-template-columns: minmax(200px, 3fr) 9fr;
}
Definiamo due colonne. La prima colonna viene definita utilizzando la funzione minmax(), che accetta due valori: la dimensione minima e la dimensione massima della traccia.
(è come min-width e max-width in uno.) La larghezza minima, come abbiamo detto, è 200 px. La larghezza massima è 3fr. fr è un'unità specifica della griglia che ti consente di distribuire lo spazio disponibile agli elementi della griglia. fr probabilmente sta per "unità di frazione", ma a breve potrebbe anche significare unità libera.
In questo caso, i nostri valori indicano che entrambe le colonne aumenteranno per riempire lo schermo, ma la colonna dei contenuti sarà sempre tre volte più larga della colonna di navigazione (a condizione che la colonna di navigazione rimanga più larga di 200 px).
Mentre il posizionamento degli elementi della griglia non è ancora corretto, la dimensione delle righe e delle colonne si comporta correttamente e genera il comportamento che ci siamo prefissati:
Posizionamento degli elementi
Una delle funzionalità più potenti di Grid è la possibilità di inserire elementi senza
considerare l'ordine DOM. Tuttavia, poiché gli screen reader si spostano nel DOM,
consigliamo vivamente di essere accessibili in modo adeguato tenendo conto di come
riordina gli elementi. Se non viene effettuato alcun posizionamento manuale, gli elementi vengono posizionati
nella griglia in ordine DOM, disposti da sinistra a destra e dall'alto verso il basso. Ogni elemento
occupa una cella. L'ordine in cui viene riempita la griglia può essere modificato utilizzando
grid-auto-flow.
Come si posizionano gli elementi? Probabilmente, il modo più semplice per posizionare gli elementi della griglia è definire le colonne e le righe coperte. Per farlo, la griglia offre due sintassi: Nella prima sintassi, definisci i punti di inizio e di fine. Nella seconda definisci un punto di partenza e un intervallo:
header {
grid-column: 1 / 3;
}
nav {
grid-row: 2 / span 2;
}
L'intestazione deve iniziare nella prima colonna e terminare prima della terza colonna. Il menu di navigazione deve iniziare nella seconda riga e occupare in totale due righe.
Tecnicamente, abbiamo terminato l'implementazione del nostro layout, ma voglio mostrarti alcune utili funzionalità offerte da Grid per semplificare il posizionamento. La prima funzionalità è che puoi assegnare un nome ai bordi della traccia e utilizzare questi nomi per il posizionamento:
body {
display: grid;
grid-template-rows: 150px [nav-start] auto 100px [nav-end];
grid-template-columns: [header-start] minmax(200px, 3fr) 9fr [header-end];
}
header {
grid-column: header-start / header-end;
}
nav {
grid-row: nav-start / nav-end;
}
Il codice riportato sopra genera lo stesso layout del codice precedente.
Ancora più potente è la funzionalità che permette di assegnare un nome a intere regioni nella griglia:
body {
display: grid;
grid-template-rows: 150px auto 100px;
grid-template-columns: minmax(200px, 3fr) 9fr;
grid-template-areas: "header header"
"nav content"
"nav footer";
}
header {
grid-area: header;
}
nav {
grid-area: nav;
}
grid-template-areas accetta una stringa di nomi separati da spazi, consentendo allo sviluppatore di assegnare un nome a ogni cella. Se due celle adiacenti hanno lo stesso nome,
verranno unite alla stessa area. In questo modo puoi fornire più semantica al codice di layout e rendere più intuitive le query supporti. Anche in questo caso, questo codice genererà lo stesso layout di prima.
Ce ne sono altri?
Sì, sì, c'è troppo da trattare in un solo post del blog. Rachel Andrew, che è anche GDE, è un'esperta invitato nel CSS Working Group e lavora con loro fin dall'inizio per far sì che Grid semplifichi il web design. Ha persino scritto un libro. Il suo sito web, Grid By Example, è una risorsa preziosa per familiarizzare con Grid. Molti pensano che Grid sia un passo rivoluzionario per il web design e che ora è abilitato per impostazione predefinita in Chrome, quindi puoi iniziare a utilizzarlo subito.