TL;DR
Se conosci Flexbox, Grid dovrebbe esserti familiare. 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 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 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, dietro un flag nella maggior parte dei browser da oltre 5 anni e per l'interoperabilità è stato impiegato più tempo per evitare un lanciato con bug come 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 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 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 la griglia CSS. Evviva!
Il passaggio successivo consiste nell'implementare le righe e le colonne della nostra griglia. Potremmo implementare tutte e 12 le colonne nel modello, ma dato che non le utilizziamo tutte, ciò renderebbe il nostro CSS inutilmente disordinato. 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 accetta 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 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 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.
In questo caso, i nostri valori indicano che entrambe le colonne cresceranno 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 px).
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 si spostano nel DOM,
consigliamo vivamente di essere adeguatamente accessibili tenendo conto di come
riordina gli elementi. 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.
Come si posizionano gli elementi? Il modo più semplice per posizionare gli elementi della griglia è definire le colonne e le righe che coprono. 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;
}
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 terminato di implementare il 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 produrrà 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,
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ì, sì, c'è troppo da trattare 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.