Layout Holy Grail con Grid

Il layout Holy Grail è un pattern classico di web design: una pagina a tutta altezza con header, footer e una sezione centrale a tre colonne, composta da una sidebar sinistra, contenuto principale e sidebar destra. Con i float era notoriamente difficile da realizzare; CSS Grid lo rende banale.

Definisca il layout con aree template e righe denominate: grid-template-areas mappa la struttura visiva. Tre colonne e tre righe, con l'header esteso su tutte le colonne, il footer esteso su tutte le colonne e tre colonne nella sezione centrale, descrivono l'intero layout in un diagramma ASCII leggibile.

Ogni elemento figlio fa riferimento alla propria area tramite il nome: header { grid-area: header }, main { grid-area: main }, nav { grid-area: sidebar }, aside { grid-area: aside }, footer { grid-area: footer }. Grid li posiziona automaticamente.

La riga centrale utilizza 1fr, che riempie tutta l'altezza rimanente della viewport dopo l'header e il footer di altezza fissa. In questo modo le sidebar e il contenuto principale si estendono sempre fino a riempire la viewport, senza bisogno di calcolare esplicitamente le altezze.

Sui dispositivi mobili, utilizzi una media query per ridefinire grid-template-areas come una disposizione a colonna singola: header, sidebar, main, aside e footer impilati verticalmente. L'ordine del DOM viene mantenuto; cambia solo il template visivo della griglia. Le aree Grid rendono leggibile la ristrutturazione reattiva.

Su tablet, rimuova l'aside destro ed espanda il main: ridefinisca in "header header" "sidebar main" "footer footer" con grid-template-columns: 240px 1fr. Imposti aside { display: none } oppure lo sposti sotto il main nella definizione delle aree.

Aggiunga uno spazio tra le tracce della griglia: gap: var(--spacing-4). Applichi il padding all'interno di ogni area invece che al contenitore Grid, per mantenere uniforme la spaziatura. In genere header e footer ricevono un padding orizzontale proprio, allineato alla larghezza massima della griglia.

L'area del contenuto principale può essere a sua volta una griglia: per esempio, un articolo a due colonne con sidebar all'interno dell'area principale. Le griglie annidate creano un layout del contenuto dentro il layout della struttura della pagina, senza gerarchie di classi complesse o posizionamenti annidati in profondità.

Renda persistente l'header: header { position: sticky; top: 0; z-index: 10; }. In un layout Grid, il posizionamento sticky su un elemento figlio della griglia funziona come previsto: l'header rimane in posizione mentre main, sidebar e aside scorrono sotto di esso.

Entrambe le sidebar possono essere persistenti: nav, aside { position: sticky; top: 0; height: 100vh; overflow-y: auto; }. Rimangono visibili mentre il contenuto principale scorre, creando un layout a tre pannelli in cui scorre solo quello centrale.

Utilizzi Grid per layout bidimensionali della struttura della pagina, come Holy Grail: Grid eccelle nel posizionare contemporaneamente gli elementi in righe e colonne denominate. Utilizzi Flexbox per layout monodimensionali dei componenti, ad esempio elementi di navigazione disposti in una riga o contenuti di card disposti in una colonna, all'interno delle aree Grid.

Perché grid-template-areas è particolarmente utile nei layout Holy Grail reattivi?

CSS Grid rende banale il layout Holy Grail, storicamente difficile da realizzare: grid-template-areas assegna un nome alle regioni, 1fr fa sì che la riga centrale riempia l'altezza della viewport e le media query ridefiniscono la mappa delle aree per la compressione reattiva. Header e sidebar persistenti si aggiungono senza ulteriore complessità.