TL;DR
Se conosci Flexbox, Grid dovrebbe esserti familiare. Rachel Andrew gestisce un fantastico 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 per il browser sembra essere molto buono (a meno che tu non sia uno dei poveri che devono supportare IE9 e versioni precedenti). Flexbox semplifica molte attività di layout complesse, come la spaziatura equidistante tra gli elementi, i layout dall'alto verso il basso o l'aspirazione massima della magia CSS: il centramento verticale.
Purtroppo, gli schermi hanno in genere una seconda dimensione di cui dobbiamo preoccuparci. A parte dedicarti tu a regolare le dimensioni degli elementi, purtroppo non è possibile avere sia un ritmo verticale sia uno orizzontale utilizzando solo flexbox. È qui che CSS Grid viene in soccorso.
CSS Grid è in fase di sviluppo, dietro un flag nella maggior parte dei browser da più di 5 anni, e abbiamo dedicato del tempo extra all'interoperabilità per evitare un lancio non riuscito come è avvenuto con Flexbox. Pertanto, se usi Griglia per implementare il layout in Chrome, è probabile che otterrai lo stesso risultato in Firefox e Safari. Al momento della scrittura, l'implementazione di Grid di Microsoft Edge non era aggiornata (come era già presente in IE11) e l'aggiornamento è "in esame".
Nonostante le somiglianze in termini di concetto e sintassi, Flexbox e Grid non sono considerati come tecniche di layout concorrenti. La griglia è disposta in due dimensioni, mentre Flexbox dispone di una sola. C'è una sinergia quando si utilizzano i due prodotti insieme.
Definizione di una griglia
Per acquisire familiarità con le singole proprietà di Grid, ti consiglio vivamente di fare riferimento a Grid By Example di Rachel Andrew o alla scheda di riferimento di CSS Tricks. Se hai familiarità con Flexbox, molte delle proprietà e il loro significato dovrebbero esserti familiari.
Diamo un'occhiata a un layout a 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 è quindi utile per molti design. Implementiamo questo layout:
Iniziamo con il nostro codice di markup:
<!DOCTYPE html>
<body>
<header></header>
<nav></nav>
<main></main>
<footer></footer>
</body>
Nel foglio di stile, iniziamo espandendo il nostro body in modo che copra l'intero
viewport e lo trasformi in un contenitore della griglia:
html, body {
width: 100vw;
min-height: 100vh;
margin: 0;
padding: 0;
}
body {
display: grid;
}
Ora usiamo la griglia CSS. Ottimo.
Il passaggio successivo consiste nell'implementare le righe e le colonne della griglia. Potremmo implementare tutte le 12 colonne nel nostro modello, ma poiché non utilizziamo tutte le colonne, questo 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 e il contenuto varia in entrambe le dimensioni. La navigazione sarà variabile anche in entrambe le dimensioni, ma imposteremo una larghezza minima di 200 px. (Perché? per mostrare le caratteristiche della griglia CSS, ovviamente).
Nella griglia CSS, l'insieme di colonne e righe è chiamato tracce. Iniziamo con la definizione del nostro primo insieme di tracce, le righe:
body {
display: grid;
grid-template-rows: 150px auto 100px;
}
grid-template-rows utilizza 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 contenitore della griglia) nella riga in questione. Poiché il corpo si estende sull'intera area visibile, la traccia che include i contenuti (giallo nell'immagine sopra) riempirà almeno tutto lo spazio disponibile, ma aumenterà (e farà scorrere il documento) se necessario.
Per quanto riguarda le colonne, vogliamo un approccio più dinamico: vogliamo che sia la navigazione che i contenuti crescano (e si restringano), ma vogliamo che la navigazione non si restringi mai al di sotto di 200 px e vogliamo che i contenuti siano più grandi della navigazione. In Flexbox useremmo flex-grow e flex-restringimento, ma in Grid l'effetto è leggermente 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 mediante la funzione minmax(), che richiede due valori: la dimensione minima e la dimensione massima della traccia.
(È come min-width e max-width in uno). Come abbiamo detto prima, la larghezza minima è di 200 px. La larghezza massima è 3fr. fr è un'unità specifica della griglia che consente di distribuire lo spazio disponibile agli elementi della griglia. Probabilmente fr è l'acronimo di "frazione unità", ma a breve potrebbe essere indicato anche come unità senza costi.
I valori qui indicati indicano che entrambe le colonne cresceranno fino a riempire lo schermo, ma la colonna dei contenuti sarà sempre 3 volte più larga della colonna nav (a condizione che la colonna nav sia più larga di 200 px).
Sebbene il posizionamento degli elementi della griglia non sia ancora corretto, la dimensione delle righe e delle colonne funziona correttamente e produce il comportamento desiderato:
Posizionamento degli elementi
Una delle funzionalità più potenti di Griglia è la possibilità di posizionare gli elementi senza considerare l'ordine DOM. Tuttavia, poiché gli screen reader navigano nel DOM,
consigliamo vivamente di fare attenzione a come riordinano gli elementi. Se non effettui 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.
Quindi, come li posizioniamo? Probabilmente il modo più semplice per posizionare gli elementi della griglia è definire le colonne e le righe che coprono. A questo scopo, la griglia offre due sintassi: nella prima, 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;
}
L'intestazione deve iniziare con la prima colonna e terminare prima della terza colonna. La nostra navigazione dovrebbe iniziare nella seconda riga e occuparsi di 2 righe in totale.
Tecnicamente, abbiamo completato l'implementazione del layout, ma vorrei mostrarti alcune funzionalità utili offerte da Griglia per semplificare il posizionamento. La prima funzionalità consiste nell'assegnare un nome ai bordi delle tracce 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 fornirà lo stesso layout del codice precedente.
Ancora più potente è la funzionalità che consente 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 prende 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 nella stessa area. In questo modo puoi fornire più semantiche al codice di layout e rendere più intuitive le query supporti. Anche in questo caso, il codice genererà lo stesso layout di prima.
C'è altro?
Sì, sono molti gli argomenti da trattare in un solo post del blog. Rachel Andrew, che è anche una GDE, è Invitata Experta nel CSS Working Group e ha collaborato con loro fin dall'inizio per assicurarsi che Grid semplifichi il web design. Ci ha anche scritto un libro. Il suo sito web Grid By Example è una risorsa preziosa per acquisire familiarità con Grid. Molte persone pensano che Grid sia una fase rivoluzionaria del web design: ora è abilitato per impostazione predefinita in Chrome per consentirti di iniziare a usarlo oggi stesso.