CSS Grid avanzato: grid-area, template-areas, subgrid

Nella pillola base abbiamo posizionato gli elementi con i numeri delle linee, grid-column: 1 / 3. Funziona, ma è poco leggibile: guardando quel numero non capisci cosa sia quell'area. MDN propone un'alternativa più espressiva, informalmente chiamata «metodo ASCII art»: dare un nome a ogni area e disegnare il layout come un piccolo disegno fatto di testo.

1. grid-template-areas + grid-area: il layout disegnato con il testo

Prima assegni un nome a ciascun elemento con grid-area, poi disegni l'intero layout sul contenitore con grid-template-areas: una stringa per ogni riga, ripetendo il nome per ogni colonna che quell'area occupa.

header { grid-area: hd; }
nav     { grid-area: nav; }
main    { grid-area: main; }
footer  { grid-area: ft; }

#pagina {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-areas:
        "hd   hd"
        "nav  main"
        "ft   ft";
}

Per lasciare una cella vuota, MDN definisce un «null cell token»: uno o più punti . al posto di un nome.

grid-template-areas:
    "hd    hd"
    ".     main"    /* la cella in basso a sinistra resta vuota */
    "ft    ft";

Vincolo importante dal manuale: se ripeti lo stesso nome più volte, quelle celle devono formare un rettangolo, un'area a forma di «L» non è valida.

Fonte: MDN Web Docs, «grid-template-areas»: celle ripetute con lo stesso nome formano una singola area, che deve essere rettangolare; un token nullo (.) crea una cella vuota.

2. Cambiare il layout intero, senza toccare l'HTML

Il vantaggio pratico più forte: puoi ridefinire completamente grid-template-areas dentro una media query, riorganizzando l'intero layout senza spostare un solo elemento nel markup.

#pagina {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "hd"
        "nav"
        "main"
        "ft";
}

@media (min-width: 768px) {
    #pagina {
        grid-template-columns: 200px 1fr;
        grid-template-areas:
            "hd   hd"
            "nav  main"
            "ft   ft";
    }
}

Gli stessi elementi HTML, nello stesso ordine: è solo la disposizione a cambiare in base allo spazio disponibile.

Fonte: MDN Web Docs, «grid-template-areas»: la proprietà può essere ridefinita all'interno di una media query per riorganizzare il layout senza modificare il markup.

3. subgrid: quando le griglie annidate non si allineano

Un problema classico: tre card fianco a fianco, ciascuna con una sua griglia interna (titolo, testo, pulsante). Se il titolo di una card va a capo su due righe, il pulsante di quella card scende, ma quello delle altre card resta più in alto. MDN spiega il motivo: una griglia annidata è indipendente da quella del genitore, e non eredita le sue dimensioni di traccia.

subgrid risolve esattamente questo: invece di creare nuove tracce, la griglia annidata usa quelle del genitore, allineandosi perfettamente con tutte le altre.

.griglia-card {
    display: grid;
    grid-template-rows: subgrid;   /* eredita le righe dalla griglia genitore */
    grid-row: span 3;              /* deve occupare 3 righe del genitore */
}

Un'insidia pratica da conoscere: subgrid funziona solo con i figli diretti dell'elemento con subgrid. Se avvolgi il contenuto in un <div> di troppo, quel wrapper diventa l'elemento sulla griglia, e i veri contenuti, ora nipoti e non più figli, restano fuori dall'allineamento, senza errori visibili in console.

Fonte: MDN Web Docs, «Subgrid»: una griglia annidata normale è indipendente e non eredita le dimensioni delle tracce dal genitore; con subgrid, la griglia annidata usa le tracce definite sul genitore invece di crearne di proprie.

In sintesi

Le named areas non aggiungono potenza a Grid: la stessa cosa si può fare con i numeri di linea. Aggiungono leggibilità, un layout scritto come piccolo disegno di testo si capisce senza dover contare le linee. Subgrid, invece, risolve un limite reale: l'allineamento tra griglie annidate che, prima, richiedeva trucchi o JavaScript.