Griglie annidate e la proprietà Subgrid

Quando si realizzano layout più complessi con CSS Grid, spesso è necessario strutturare contenuti all'interno di altri contenuti—posizionando griglie dentro altre griglie. Questo è noto come griglie annidate. In una griglia annidata, un contenitore grid viene inserito all'interno di un elemento grid, creando un contesto grid indipendente per i suoi figli. Sebbene questo approccio offra flessibilità, può causare allineamenti incoerenti tra la griglia genitore e quella figlia.

Per risolvere le problematiche di allineamento, CSS introduce la proprietà subgrid. Quando si utilizza subgrid come valore per grid-template-rows o grid-template-columns, la griglia figlia eredita le dimensioni e le definizioni delle tracce dalla griglia genitore. Questo garantisce che i contenuti annidati siano perfettamente allineati con le tracce della griglia principale, mantenendo la coerenza visiva nei layout complessi.

Quando utilizzare Subgrid rispetto alle griglie annidate indipendenti

Scegliere subgrid quando è necessario che gli elementi figli siano allineati con precisione alle colonne o alle righe della griglia genitore. Questo è particolarmente utile per layout a schede, navigazione multilivello o qualsiasi progetto in cui l'allineamento visivo tra i componenti sia fondamentale. Utilizzare griglie annidate indipendenti quando le tracce, gli spazi o l'allineamento della griglia figlia devono differire da quelli della griglia genitore, oppure quando il supporto del browser per subgrid non è sufficiente per i requisiti del progetto.