Posizionamento del contenuto di elementi della griglia nel contenitore primario (funzione di subgrid)

Tutte le guide sulla griglia CSS sembrano implicare una struttura in cui gli elementi posizionati in una griglia sono figli della griglia stessa.

A
B

Dove .wrapper ha display: grid e una definizione delle proprietà della griglia.

Ha senso se voglio posizionare un elemento che è un “nipote” della griglia, sulla griglia stessa (invece di fare affidamento sul suo genitore?)

 
A
B
C

Qui, voglio essere in grado di mettere A, B e C ciascuno sulla propria riga della griglia; ciò avrebbe senso?

display: subgrid

Dalla bozza della griglia CSS 2 :

2. Contenitori di griglia

I subgrid forniscono la possibilità di passare i parametri della griglia verso il basso attraverso elementi nidificati e le informazioni di ridimensionamento basate sul contenuto tornano alla loro griglia principale.

Se l’elemento è un elemento della griglia (cioè è in-flow e il suo genitore è un contenitore della griglia), display: subgrid rende l’elemento una subgrid (che è un tipo speciale di box contenitore della griglia) e di conseguenza ignora il suo grid-template-* griglia- grid-template-* e grid-*-gap proprietà grid-*-gap in favore dell’adozione della griglia parent le tracce che si estende.

3. Subgrids

Un elemento della griglia può essere esso stesso un contenitore della griglia dandogli display: grid . In questo caso la disposizione dei contenuti sarà indipendente dal layout della griglia alla quale partecipa.

In alcuni casi potrebbe essere necessario che i contenuti di più elementi della griglia siano allineati l’uno con l’altro. Un contenitore di griglia che è esso stesso un elemento di griglia può rinviare la definizione delle sue righe e colonne al suo contenitore di griglia padre utilizzando display: subgrid , rendendolo una subgrid.

In questo caso, gli elementi della griglia della subgrid partecipano alla ridimensionamento della griglia del contenitore della griglia padre, consentendo l’allineamento dei contenuti di entrambe le griglie. Leggi di più.

Questa funzione non è stata ancora implementata nei principali browser. Chissà quando sarà.

In Grid, solo i figli in-stream del contenitore diventano elementi della griglia e possono accettare proprietà della griglia.

Con display: subgrid su una griglia, i figli dell’elemento rispettano le linee del contenitore.

In base alla specifica Grid Level 1 , display: subgrid è stato posticipato al Livello 2 .

Per ora, display: grid sugli elementi della griglia (ad es. I contenitori di griglia annidati) può essere utile in alcuni casi.

Un’altra ansible soluzione è la display: contents . Il metodo è spiegato qui:

  • Qual è un’alternativa alla subgrid CSS?

Maggiori informazioni: