css - Posizionamento del contenuto degli elementi della griglia nel contenitore primario(funzione della griglia secondaria)



css3 css-grid (1)

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

<div class="wrapper">
  <div>A</div>
  <div>B</div>
</div>

Dove ha display: grid .wrapper 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?)

<div class="wrapper">
  <div>A</div>
  <div>
    <div>B</div>
    <div>C</div>
  </div>
</div>

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


display: subgrid

Dalle specifiche della bozza di CSS Grid Level 2 :

2. Contenitori griglia

Le griglie secondarie offrono la possibilità di trasferire i parametri della griglia attraverso elementi nidificati e di ridimensionare le informazioni di dimensionamento basate sul contenuto nella loro griglia principale.

Se l'elemento è un elemento di griglia (ovvero è in-flow e il suo genitore è un contenitore di griglia), display: subgrid trasforma l'elemento in un sottogrid (che è un tipo speciale di box contenitore di griglia) e di conseguenza ignora il suo grid-template-* and grid-*-gap proprietà grid-*-gap a favore dell'adozione delle tracce della griglia parent che abbraccia.

3. Sottogriglie

Un elemento della griglia può essere esso stesso un contenitore di griglia dandogli display: grid . In questo caso il layout dei suoi contenuti sarà indipendente dal layout della griglia a cui partecipa.

In alcuni casi potrebbe essere necessario che i contenuti di più elementi della griglia si allineino. 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 usando display: subgrid , rendendolo una subgrid.

In questo caso, gli elementi della griglia della griglia secondaria partecipano al dimensionamento della griglia del contenitore della griglia padre, consentendo l'allineamento del contenuto 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-flow del contenitore diventano elementi della griglia e possono accettare le proprietà della griglia.

Con display: subgrid su un elemento della griglia, i figli dell'articolo rispettano le linee del contenitore.

Secondo la specifica Grid Level 1 , display: subgrid è stata rinviata al Livello 2 .

Per ora, display: grid on grid items (cioè, container grid nidificati) può essere utile in alcuni casi.

Un'altra possibile soluzione alternativa è la display: contents . Il metodo è spiegato qui:

  • Qual è un'alternativa a cgr subgrid?

Maggiori informazioni:





css-grid