CSS Grid: template-areas, auto-fit e minmax

grid-template-areas consente di denominare le regioni usando un formato visivo simile all'ASCII art. Ogni stringa rappresenta una riga; ogni parola una cella. I punti (.) rappresentano le celle vuote. Assegni gli elementi con grid-area: name.

Modifichi il layout delle template areas nei breakpoint per spostare la barra laterale da una colonna a una posizione sotto main sui dispositivi mobili.

auto-fit: comprime le tracce vuote, così gli elementi si espandono fino a riempire la riga. auto-fill: mantiene la struttura della griglia anche quando alcune tracce sono vuote. Per le griglie responsive di schede, auto-fit è quasi sempre la scelta giusta.

minmax(min, max) definisce una traccia con dimensione minima min e massima max. Combinazioni comuni: minmax(0, 1fr) (completamente flessibile), minmax(200px, 1fr) (responsive con una dimensione minima), minmax(auto, auto) (dimensionata in base al contenuto).

Usi grid-column: span 2 per estendere un elemento su due colonne. Lo combini con grid-row: span 2 per creare un elemento in evidenza che occupa un blocco 2×2 nella griglia.

grid-auto-flow: dense riempie nuovamente gli spazi vuoti con elementi più piccoli. È utile per creare layout simili a mosaici, in cui gli elementi hanno dimensioni diverse.

L'unità fr si riferisce sempre allo spazio disponibile dopo aver sottratto le tracce di dimensione fissa e gli spazi. La combinazione di fr e dimensioni fisse offre la massima flessibilità: barra laterale fissa e area principale flessibile.

Queste proprietà controllano la dimensione delle tracce create implicitamente, quando gli elementi vengono posizionati al di fuori della griglia esplicita. grid-auto-rows: minmax(100px, auto) assegna alle righe implicite un'altezza minima.

Chrome DevTools sovrappone le linee della griglia e i nomi delle aree alla pagina quando fa clic sul badge 'grid' accanto a un contenitore grid nel pannello Elements. Lo utilizzi per eseguire il debug delle dimensioni inattese delle tracce e del posizionamento degli elementi.

grid-template-columns: subgrid consente a una griglia annidata di allinearsi alle tracce della griglia principale. È supportato in tutti i browser moderni dal 2023: è essenziale per allineare i contenuti interni delle schede in una griglia.

Grid è la scelta migliore quando serve un controllo bidimensionale esplicito, cioè quando contano sia le righe sia le colonne. Se invece si desidera semplicemente disporre gli elementi in una riga o in una pila, Flexbox è più semplice.

Quale valore di CSS Grid crea tante colonne quante ne entrano, con una dimensione minima di 200px, facendo condividere a ogni colonna in parti uguali lo spazio rimanente?

grid-template-areas crea layout denominati e facili da leggere. auto-fit + minmax crea griglie responsive senza media query. Estenda gli elementi su più colonne e righe. Il posizionamento automatico denso riempie gli spazi vuoti. Usi la sovrapposizione della griglia di DevTools per eseguire il debug. Subgrid allinea gli elementi annidati alle tracce della griglia principale.