TL;DR
Se conosci Flexbox, Grid non dovrebbe sorprenderti. 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 è diventato di uso comune e il supporto dei browser sembra davvero buono (a meno che tu non sia una delle povere anime che devono supportare IE9 e versioni precedenti). Flexbox ha semplificato molte attività di layout complesse, come la spaziatura equidistante tra gli elementi, i layout dall'alto verso il basso o il Santo Graal della magia CSS: il centratura verticale.
Purtroppo, gli schermi hanno spesso una seconda dimensione di cui dobbiamo tenere conto. A meno che tu non voglia occuparti personalmente delle dimensioni degli elementi, purtroppo non puoi avere un ritmo sia verticale che orizzontale utilizzando solo flexbox. È qui che entra in gioco la griglia CSS.
CSS Grid è in fase di sviluppo, dietro un flag nella maggior parte dei browser da oltre 5 anni e per l'interoperabilità è stato impiegato più tempo per evitare un lanciamento con bug come è successo con Flexbox. Pertanto, se utilizzi Grid per implementare il layout in Chrome, è probabile che otterrai lo stesso risultato in Firefox e Safari. Al momento della stesura di questo articolo, l'implementazione di Grid in Microsoft Edge è obsoleta (la stessa già presente in IE11) e l'aggiornamento è "in fase di valutazione".
Nonostante le somiglianze in termini di concetto e sintassi, non pensare a Flexbox e Grid come a tecniche di layout concorrenti. La griglia si dispone in due dimensioni, mentre Flexbox si dispone in una. L'utilizzo combinato delle due soluzioni genera sinergie.
Definizione di una griglia
Per acquisire familiarità con le singole proprietà di Grid, ti consiglio vivamente di consultare Grid By Example di Rachel Andrew o la cheat sheet di CSS Tricks. Se hai familiarità con Flexbox, molte delle proprietà e il loro significato dovrebbero essere familiari.
Diamo un'occhiata a un layout della griglia standard a 12 colonne. Il layout classico con 12 colonne è molto apprezzato perché il numero 12 è divisibile per 2, 3, 4 e 6 ed è quindi utile per molti progetti. Implementiamo questo layout:
Iniziamo con il codice 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'intero
viewport e trasformandolo in un contenitore della griglia:
html, body {
width: 100vw;
min-height: 100vh;
margin: 0;
padding: 0;
}
body {
display: grid;
}
Ora utilizziamo CSS Grid. Evviva!
Il passaggio successivo consiste nell'implementare le righe e le colonne della nostra griglia. Potremmo implementare tutte e 12 le colonne nel nostro mockup, ma poiché non le utilizziamo tutte, il CSS risulterebbe inutilmente complicato. Per semplicità, imposteremo il layout nel seguente modo:
L'intestazione e il piè di pagina sono variabili in larghezza e i contenuti sono variabili in entrambe le dimensioni. Anche il menu sarà variabile in entrambe le dimensioni, ma imposteremo una larghezza minima di 200 pixel. (Perché? Per mostrare le funzionalità di CSS Grid, ovviamente.
In CSS Grid, l'insieme di colonne e righe è chiamato canali. Iniziamo con la definizione del nostro primo insieme di tracce, le righe:
body {
display: grid;
grid-template-rows: 150px auto 100px;
}
grid-template-rows prende una sequenza di dimensioni che definiscono le singole righe.
In questo caso, assegniamo alla prima riga un'altezza di 150 pixel e all'ultima di 100 pixel.
La riga centrale è impostata su auto, il che significa che si adatterà all'altezza necessaria per adattarsi agli elementi della griglia (gli elementi secondari del contenitore della griglia) in quella riga. Poiché il testo è esteso all'intera visualizzazione, la traccia contenente i contenuti (giallo nell'immagine sopra) riempirà almeno tutto lo spazio disponibile, ma aumenterà (e farà scorrere il documento) se necessario.
Per le colonne vogliamo adottare un approccio più dinamico: vogliamo che sia il menu di navigazione sia i contenuti crescano (e si riducano), ma che il menu di navigazione non si riduca mai a meno di 200 pixel e che i contenuti siano più grandi del menu di navigazione. In Flexbox useremmo 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;
}
Stiamo definendo due colonne. La prima colonna è definita utilizzando la funzione minmax(), che accetta due valori: le dimensioni minime e massime della traccia.
È come min-width e max-width in uno. La larghezza minima è, come discusso in precedenza, 200 pixel. La larghezza massima è 3fr. fr è un'unità specifica per la griglia che consente di distribuire lo spazio disponibile agli elementi della griglia.
fr probabilmente sta per "unità frazionaria", ma potrebbe anche significare unità senza costi a breve.
I valori qui indicati indicano che entrambe le colonne aumenteranno fino a 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 pixel).
Anche se il posizionamento degli elementi della griglia non è ancora corretto, le dimensioni delle righe e delle colonne si comportano correttamente e generano il comportamento che volevamo ottenere:
Posizionamento degli articoli
Una delle funzionalità più potenti di Grid è la possibilità di posizionare gli elementi senza tenere conto dell'ordine DOM. Tuttavia, poiché gli screen reader navigano nel DOM,
consigliamo vivamente di prestare attenzione al modo in cui
riordini gli elementi per garantire l'accessibilità. Se non viene eseguito alcun posizionamento manuale, gli elementi vengono inseriti
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 la griglia viene compilata può essere modificato utilizzando
grid-auto-flow.
Quindi, come si inseriscono gli elementi? Il modo più semplice per posizionare gli elementi della griglia è definire le colonne e le righe che coprono. Grid offre due sintassi per farlo: nella prima sintassi definisci i punti di inizio e di fine. Nel secondo, definisci un punto di partenza e un intervallo:
header {
grid-column: 1 / 3;
}
nav {
grid-row: 2 / span 2;
}
Vogliamo che l'intestazione inizi nella prima colonna e finisca prima della terza colonna. Il menu deve iniziare nella seconda riga e occupare 2 righe in totale.
Tecnicamente, abbiamo completato l'implementazione del layout, ma voglio mostrarti alcune funzionalità di praticità che Grid offre per semplificare il posizionamento. La prima funzionalità è che puoi assegnare un nome ai bordi dei canali e utilizzarli 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 produrrà lo stesso layout del codice precedente.
Ancora più potente è la funzionalità di assegnazione di nomi 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,
vengono unite nella stessa area. In questo modo puoi fornire più semantica al codice di layout e rendere le query sui media più intuitive. Anche in questo caso, il codice genererà lo stesso layout di prima.
C'è altro?
Sì, ce ne sono, troppe per essere trattate in un solo post del blog. Rachel Andrew, che è anche una GDE, è un'esperta invitata nel gruppo di lavoro CSS e collabora con il gruppo fin dall'inizio per garantire che Grid semplifichi il web design. Ha persino scritto un libro sull'argomento. Il suo sito web Grid By Example è una risorsa preziosa per familiarizzare con la griglia. Molte persone ritengono che Grid sia un passo rivoluzionario per il web design e ora è attivato per impostazione predefinita in Chrome, quindi puoi iniziare a utilizzarlo oggi stesso.