Esplorazione della griglia implicita di CSS Grid e dei poteri di posizionamento automatico

Quando si lavora con CSS Grid, la prima cosa da fare è impostare display: grid sull'elemento che vogliamo diventare un contenitore di griglia. Quindi definiamo esplicitamente la griglia usando una combinazione di grid-template-columns, grid-template-rowse grid-template-areas. E da lì, il passaggio successivo è posizionare gli elementi all'interno della griglia.

Questo è l'approccio classico che dovrebbe essere utilizzato e lo consiglio anche io. Tuttavia, esiste un altro approccio per la creazione di griglie senza alcuna definizione esplicita. Lo chiamiamo il griglia implicita.

"Esplicito implicito? Che diamine sta succedendo qui?"

Termini strani, vero? Già Manuel Matuzovic ha una buona spiegazione di ciò che potremmo definire "implicito" ed "esplicito" in CSS Grid, ma scaviamo direttamente in cosa , il specifica dice:

I grid-template-rows, grid-template-columnse grid-template-areas le proprietà definiscono un numero fisso di tracce che si formano la griglia esplicita. Quando gli elementi della griglia sono posizionati al di fuori di questi limiti, il contenitore della griglia genera tracce griglia implicite aggiungendo linee griglia implicite alla griglia. Queste linee insieme alla forma esplicita della griglia la griglia implicita.

Quindi, in parole povere, il browser genera automaticamente righe e colonne extra nel caso in cui degli elementi si trovino al di fuori della griglia definita.

E il posizionamento automatico?

Simile al concetto di griglia implicita, posizionamento automatico è la capacità del browser di posizionare automaticamente gli elementi all'interno della griglia. Non sempre è necessario fornire la posizione di ogni articolo.

Attraverso diversi casi d'uso, vedremo come tali funzionalità possono aiutarci a creare una griglia complessa e dinamica con poche righe di codice.

Barra laterale dinamica

Qui abbiamo tre diversi layout ma abbiamo solo una configurazione di griglia che funziona per tutti loro.

main {
  display: grid;
  grid-template-columns: 1fr;
}

Solo una colonna occupa tutto lo spazio libero. Questa è la nostra griglia “esplicita”. È impostato per adattarsi a un elemento della griglia nel file main contenitore a griglia. È tutto. Una colonna e una riga:

Ma cosa accadrebbe se decidessimo di inserire un altro elemento, diciamo an aside (la nostra barra laterale dinamica). Poiché è attualmente (ed esplicitamente) definito, la nostra griglia dovrà adattarsi automaticamente per trovare un posto per quell'elemento. E se non facciamo nient'altro con il nostro CSS, ecco cosa ci dice che sta accadendo DevTools.

Possiamo spostare il <aside> in una colonna accanto a <section>:

aside {
  grid-column-start: 2;
}

Ed ecco cosa ci dice DevTools ora:

Posizioniamo il nostro elemento nella seconda colonna ma... non abbiamo una seconda colonna. Strano, vero? Non abbiamo mai dichiarato una seconda colonna sul <main> grid container, ma il browser ne ha creato uno per noi! Questa è la parte fondamentale della specifica che abbiamo esaminato:

Quando gli elementi della griglia sono posizionati al di fuori di questi limiti, il contenitore della griglia genera tracce griglia implicite aggiungendo linee griglia implicite alla griglia.

Questa potente funzionalità ci consente di avere layout dinamici. Se abbiamo solo il <section> elemento, tutto ciò che otteniamo è una colonna. Ma se aggiungiamo un <aside> elemento al mix, viene creata una colonna aggiuntiva per contenerlo.

Potremmo posizionare il <aside> prima di <section> invece così:

aside {
  grid-column-end: -2;
} 

Questo crea la colonna implicita all'inizio della griglia, a differenza del codice precedente che posiziona la colonna implicita alla fine.

Possiamo fare la stessa cosa più facilmente usando il grid-auto-flow per impostare tutte le tracce implicite in modo che scorrano in a column direzione:

Ora non c'è bisogno di specificare grid-column-start posizionare il <aside> elemento a destra del <section>! In effetti, qualsiasi altro elemento della griglia che decidiamo di inserire in qualsiasi momento ora scorrerà in una direzione di colonna, ognuno posizionato nelle proprie tracce di griglia implicite. Perfetto per le situazioni in cui il numero di elementi nella griglia non è noto in anticipo!

Detto questo, abbiamo ancora bisogno grid-column-end se vogliamo metterlo in una colonna a sinistra di esso perché, altrimenti, il <aside> occuperà la colonna esplicita che, a sua volta, spinge il <section> al di fuori della griglia esplicita e lo costringe a prendere la colonna implicita.

Lo so, lo so. È un po' contorto. Ecco un altro esempio che possiamo usare per capire meglio questa piccola stranezza:

Nel primo esempio, non abbiamo specificato alcun posizionamento. In questo caso, il browser posizionerà prima il file <aside> elemento nella colonna esplicita poiché viene prima nel DOM. Il <section>, nel frattempo, viene automaticamente posizionato nella colonna della griglia che il browser crea automaticamente (o implicitamente) per noi.

Nel secondo esempio, impostiamo il <aside> elemento al di fuori della griglia esplicita:

aside {
  grid-column-end: -2;
}

Ora non importa <aside> viene prima nell'HTML. Riassegnando <aside> da qualche altra parte, abbiamo fatto il <section> elemento disponibile per prendere la colonna esplicita.

Griglia immagine

Proviamo qualcosa di diverso con una griglia di immagini in cui abbiamo un'immagine grande e alcune miniature accanto (o sotto).

Abbiamo due configurazioni di griglia. Ma indovinate un po? Non sto definendo alcuna griglia! Tutto quello che sto facendo è questo:

.grid img:first-child {
  grid-area: span 3 / span 3;
}

È sorprendente che abbiamo solo bisogno di una riga di codice per realizzare qualcosa del genere, quindi analizziamo cosa sta succedendo e vedrai che è più facile di quanto potresti pensare. Prima di tutto, grid-area è una proprietà abbreviata che combina le seguenti proprietà in un'unica dichiarazione:

• grid-row-start
• grid-row-end
• grid-column-start
• grid-column-end

Attesa! Non lo è grid-area la proprietà che usiamo per definire aree denominate invece di dove gli elementi iniziano e finiscono sulla griglia?

Sì, ma fa anche di più. Potremmo scrivere molto di più su grid-area, ma in questo caso particolare:

.grid img:first-child {
  grid-area: span 3 / span 3;
}

/* ...is equivalent to: */
.grid img:first-child {
  grid-row-start: span 3;
  grid-column-start: span 3;
  grid-row-end: auto;
  grid-column-end: auto;
}

Possiamo vedere la stessa cosa quando apriamo DevTools per espandere la versione abbreviata:

Ciò significa che il primo elemento dell'immagine nella griglia deve estendersi tre colonne ed tre file. Ma poiché non abbiamo definito colonne o righe, il browser lo fa per noi.

Abbiamo essenzialmente posizionato la prima immagine nell'HTML per occupare una griglia 3⨉3. Ciò significa che qualsiasi altra immagine verrà posizionata automaticamente in quelle stesse tre colonne senza la necessità di specificare nulla di nuovo.

Per riassumere, abbiamo detto al browser che la prima immagine deve occupare lo spazio di tre colonne e tre righe che non abbiamo mai definito esplicitamente durante l'impostazione del contenitore della griglia. Il browser ha impostato quelle colonne e righe per noi. Di conseguenza, le immagini rimanenti nell'HTML scorrono al loro posto usando le stesse tre colonne e righe. E poiché la prima immagine occupa tutte e tre le colonne della prima riga, le immagini rimanenti confluiscono in righe aggiuntive che contengono ciascuna tre colonne, dove ogni immagine occupa una singola colonna.

Tutto questo da una riga di CSS! Questo è il potere della griglia "implicita" e del posizionamento automatico.

Per la seconda configurazione della griglia in quella demo, tutto ciò che ho fatto è cambiare la direzione del flusso automatico usando grid-auto-flow: column allo stesso modo in cui abbiamo fatto prima quando abbiamo posizionato un <aside> elemento accanto ad a <section>. Questo costringe il browser a creare un quarto colonna che può utilizzare per posizionare le immagini rimanenti. E poiché abbiamo tre righe, le immagini rimanenti vengono posizionate all'interno della stessa colonna verticale.

Dobbiamo aggiungere alcune proprietà alle immagini per assicurarci che si adattino bene all'interno della griglia senza alcun overflow:

.grid {
  display: grid;
  grid-gap: 10px;
}

/* for the second grid configuration */
.horizontal {
  grid-auto-flow: column;
}

/* The large 3⨉3 image */
.grid img:first-child {
  grid-area: span 3 / span 3;
}

/* Help prevent stretched or distorted images */
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

E, naturalmente, possiamo facilmente aggiornare la griglia per considerare più immagini regolando un valore. Quello sarebbe il 3 negli stili per l'immagine grande. Abbiamo questo:

.grid img:first-child {
  grid-area: span 3 / span 3;
}

Ma potremmo aggiungere una quarta colonna semplicemente cambiandola in 4 anziché:

.grid img:first-child {
  grid-area: span 4 / span 4;
}

Ancora meglio: impostiamola come proprietà personalizzata per rendere le cose ancora più facili da aggiornare.

Layout dinamici

Il primo caso d'uso con la barra laterale è stato il nostro primo layout dinamico. Ora affronteremo layout più complessi in cui il numero di elementi determinerà la configurazione della griglia.

In questo esempio, possiamo avere da uno a quattro elementi in cui la griglia si adatta in modo da adattarsi perfettamente al numero di elementi senza lasciare spazi scomodi o mancanti.

Quando abbiamo un elemento, non facciamo nulla. L'elemento si estenderà per riempire l'unica riga e colonna creata automaticamente dalla griglia.

Bit quando aggiungiamo il secondo elemento, creiamo un'altra colonna (implicita) usando grid-column-start: 2.

Quando aggiungiamo un terzo elemento, dovrebbe occupare la larghezza di due colonne: ecco perché l'abbiamo usato grid-column-start: span 2, ma solo se è il :last-child perché se (e quando) aggiungiamo un quarto elemento, quello dovrebbe occupare solo una singola colonna.

Sommando, abbiamo quattro configurazioni di griglia solo con due dichiarazioni e la magia della griglia implicita:

.grid {
  display: grid;
}
.grid :nth-child(2) {
  grid-column-start: 2;
}
.grid :nth-child(3):last-child {
  grid-column-start: span 2;
}

Proviamone un altro:

Non stiamo facendo nulla per il primo e il secondo caso in cui abbiamo solo uno o due elementi. Quando aggiungiamo un terzo elemento, però, diciamo al browser che, purché sia ​​il :last-child — dovrebbe occupare due colonne. Quando aggiungiamo un quarto elemento, diciamo al browser che l'elemento deve essere posizionato nella seconda colonna.

.grid {
  display: grid;
}
.grid :nth-child(3):last-child {
  grid-column-start: span 2;
}
.grid :nth-child(4) {
  grid-column-start: 2;
}

Stai iniziando a capire il trucco? Diamo al browser istruzioni specifiche in base al numero di elementi (utilizzando :nth-child) e, a volte, un'istruzione può modificare completamente il layout.

Va notato che il dimensionamento non sarà lo stesso quando lavoriamo con contenuti diversi:

Poiché non abbiamo definito alcuna dimensione per i nostri articoli, il browser li ridimensiona automaticamente in base al loro contenuto e potremmo ritrovarci con dimensioni diverse rispetto a quelle che abbiamo appena visto. Per superare questo, dobbiamo espressamente specificare che tutte le colonne e le righe abbiano le stesse dimensioni:

grid-auto-rows: 1fr;
grid-auto-columns: 1fr;

Ehi, non abbiamo ancora giocato con quelle proprietà! grid-auto-rows ed grid-auto-columns imposta la dimensione delle righe e delle colonne implicite, rispettivamente, in un contenitore della griglia. O, come la spec lo spiega:

I grid-auto-columns ed grid-auto-rows le proprietà specificano la dimensione delle tracce a cui non è stata assegnata una dimensione da grid-template-rows or grid-template-columns.

Ecco un altro esempio in cui possiamo arrivare fino a sei elementi. Questa volta ti lascio analizzare il codice. Non preoccuparti, i selettori possono sembrare complessi ma la logica è piuttosto semplice.

Anche con sei elementi, ci servivano solo due dichiarazioni. Immagina tutti i layout complessi e dinamici che possiamo ottenere con poche righe di codice!

Cosa sta succedendo grid-auto-rows e perché ci vogliono tre valori? Stiamo definendo tre righe?

No, non stiamo definendo tre righe. Ma noi sono definendo tre valori come modello per le nostre righe implicite. La logica è la seguente:

• Se abbiamo una riga, verrà ridimensionata con il primo valore.
• Se abbiamo due righe, la prima ottiene il primo valore e la seconda il secondo valore.
• Se abbiamo tre righe, i tre valori verranno utilizzati.
• Se abbiamo quattro righe (e qui arriva la parte interessante), utilizziamo i tre valori per le prime tre righe e riutilizziamo nuovamente il primo valore per la quarta riga. Ecco perché è una specie di schema che ripetiamo per dimensionare tutte le righe implicite.
• Se abbiamo 100 righe, le dimensioni saranno tre per tre 2fr 2fr 1fr 2fr 2fr 1fr 2fr 2fr 1fr, ecc.

a differenza di grid-template-rows che definisce il numero di righe e le loro dimensioni, grid-auto-rows solo la riga delle taglie che potrebbe essere creata lungo il percorso.

Se torniamo al nostro esempio, la logica è di avere la stessa dimensione quando vengono create due righe (useremo il file 2fr 2fr), ma se viene creata una terza riga, la riduciamo un po'.

Modelli di griglia

Per quest'ultimo parleremo di modelli. Probabilmente hai visto quei layout a due colonne in cui una colonna è più larga dell'altra e ogni riga alterna il posizionamento di quelle colonne.

Questo layout di ordinamento può essere anche difficile da realizzare senza sapere esattamente con quale contenuto abbiamo a che fare, ma i poteri di posizionamento automatico impliciti di CSS Grid lo rendono un gioco da ragazzi.

Dai un'occhiata al codice. Può sembrare complesso, ma analizziamolo perché finisce per essere piuttosto semplice.

La prima cosa da fare è identificare il modello. Chiediti: "Dopo quanti elementi dovrebbe ripetere lo schema?" In questo caso è dopo ogni quattro elementi. Quindi, diamo un'occhiata all'utilizzo di solo quattro elementi per ora:

Ora definiamo la griglia e impostiamo il modello generale usando il :nth-child selettore per alternanza tra elementi:

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows equal to 100px */
}
.grid :nth-child(4n + 1) { /* ?? */ }
.grid :nth-child(4n + 2) { /* ?? */ }
.grid :nth-child(4n + 3) { /* ?? */ }
.grid :nth-child(4n + 4) { /* ?? */ }

Abbiamo detto che il nostro schema si ripete ogni quattro elementi, quindi lo useremo logicamente 4n + x where x varia da 1 a 4. È un po' più semplice spiegare lo schema in questo modo:

4(0) + 1 = 1 = 1st element /* we start with n = 0 */
4(0) + 2 = 2 = 2nd element
4(0) + 3 = 3 = 3rd element
4(0) + 4 = 4 = 4th element
4(1) + 1 = 5 = 5th element /* our pattern repeat here at n = 1 */
4(1) + 2 = 6 = 6th element
4(1) + 3 = 7 = 7th element
4(1) + 4 = 8 = 8th element
4(2) + 1 = 9 = 9th element /* our pattern repeat again here at n = 2 */
etc.

Perfetto, vero? Abbiamo quattro elementi e ripetiamo lo schema sul quinto elemento, sul nono elemento e così via.

Quelli :nth-child i selettori possono essere complicati! Chris ha un super disponibile spiegazione di come funziona il tutto, Compreso ricette per creare modelli diversi.

Ora configuriamo ogni elemento in modo che:

1. Il primo elemento deve prendere due colonne e iniziare dalla colonna uno (grid-column: 1/span 2).
2. Il secondo elemento è posto nella terza colonna (grid-column-start: 3).
3. Il terzo elemento è posto alla prima colonna: (grid-column-start: 1).
4. Il quarto elemento prende due colonne e inizia dalla seconda colonna: (grid-column: 2/span 2).

Eccolo in CSS:

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1) { grid-column: 1/span 2; }
.grid :nth-child(4n + 2) { grid-column-start: 3; }
.grid :nth-child(4n + 3) { grid-column-start: 1; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

Potremmo fermarci qui e farla finita… ma possiamo fare di meglio! In particolare, possiamo rimuovere alcune dichiarazioni e fare affidamento sui poteri di posizionamento automatico della griglia per svolgere il lavoro per noi. Questa è la parte più difficile da grok e richiede molta pratica per essere in grado di identificare cosa può essere rimosso.

La prima cosa che possiamo fare è aggiornare grid-column: 1 /span 2 e usa solo grid-column: span 2 poiché, per impostazione predefinita, il browser inserirà il primo elemento nella prima colonna. Possiamo anche rimuovere questo:

.grid :nth-child(4n + 3) { grid-column-start: 1; }

Posizionando il primo, il secondo e il quarto elemento, la griglia posiziona automaticamente il terzo elemento nella posizione corretta. Ciò significa che ci rimane questo:

.grid {
  display: grid;
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
  grid-auto-columns: 1fr; /* all the columns are equal */
}
.grid :nth-child(4n + 1) { grid-column: span 2; }
.grid :nth-child(4n + 2) { grid-column-start: 2; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

Ma dai, possiamo passeggiare per fare di meglio! Possiamo anche rimuovere questo:

.grid :nth-child(4n + 2) { grid-column-start: 2; }

Come mai? Se posizioniamo il quarto elemento nella seconda colonna consentendogli di occupare due colonne intere, stiamo forzando la griglia a creare una terza colonna implicita, dandoci un totale di tre colonne senza dirlo esplicitamente. Il quarto elemento non può entrare nella prima riga poiché anche il primo elemento occupa due colonne, quindi scorre alla riga successiva. Questa configurazione ci lascia con una colonna vuota nella prima riga e una vuota nella seconda riga.

Penso che tu sappia la fine della storia. Il browser posizionerà automaticamente il secondo e il terzo elemento in quei punti vuoti. Quindi il nostro codice diventa ancora più semplice:

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1) { grid-column: span 2; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

Tutto ciò che serve sono cinque dichiarazioni per creare un modello molto interessante e molto flessibile. La parte di ottimizzazione può essere complicata, ma ci si abitua e si ottengono alcuni trucchi con la pratica.

Perché non usare grid-template-columns definire colonne esplicite poiché conosciamo il numero di colonne?

Possiamo farlo! Ecco il codice per questo:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1),
.grid :nth-child(4n + 4) {
  grid-column: span 2;
}

Come puoi vedere, il codice è decisamente più intuitivo. Definiamo tre colonne della griglia esplicite e diciamo al browser che il primo e il quarto elemento devono occupare due colonne. Consiglio vivamente questo approccio! Ma l'obiettivo di questo articolo è esplorare nuove idee e trucchi che otteniamo dai poteri impliciti e di posizionamento automatico di CSS Grid.

L'approccio esplicito è più semplice, mentre una griglia implicita richiede di - scusate il gioco di parole - colmare le lacune in cui i CSS stanno facendo un lavoro aggiuntivo dietro le quinte. Alla fine, credo che avere una solida comprensione delle griglie implicite ti aiuterà a capire meglio l'algoritmo CSS Grid. Dopotutto, non siamo qui per studiare ciò che è ovvio: siamo qui per esplorare territori selvaggi!

Proviamo un altro pattern, un po' più veloce questa volta:

Il nostro modello si ripete ogni sei elementi. Il terzo e il quarto elemento devono occupare ciascuno due righe complete. Se posizioniamo il terzo e il quarto elemento, sembra che non abbiamo bisogno di toccare gli altri, quindi proviamo quanto segue:

.grid {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-rows: 100px;
}
.grid :nth-child(6n + 3) {
  grid-area: span 2/2; /* grid-row-start: span 2 && grid-column-start: 2 */
}
.grid :nth-child(6n + 4) {
  grid-area: span 2/1; /* grid-row-start: span 2 && grid-column-start: 1 */
}

Hmm, non va bene. Dobbiamo posizionare il secondo elemento nella prima colonna. In caso contrario, la griglia lo posizionerà automaticamente nella seconda colonna.

.grid :nth-child(6n + 2) {
  grid-column: 1; /* grid-column-start: 1 */
}

Meglio, ma c'è ancora più lavoro, dobbiamo spostare il terzo elemento in alto. È allettante provare a posizionarlo nella prima riga in questo modo:

.grid :nth-child(6n + 3) {
  grid-area: 1/2/span 2; 
    /* Equivalent to:
       grid-row-start: 1;
       grid-row-end: span 2;
       grid-column-start: 2 
     */
}

Ma questo non funziona perché forza tutto il 6n + 3 elementi per essere posizionati nella stessa area che crea un layout confuso. La vera soluzione è mantenere la definizione iniziale del terzo elemento e aggiungere grid-auto-flow: dense per colmare le lacune. Da MDN:

[The] algoritmo di impacchettamento "denso" tenta di riempire nei fori in precedenza nella griglia, se gli articoli più piccoli vengono visualizzati in un secondo momento. Ciò potrebbe far apparire gli articoli fuori ordine, quando ciò riempirebbe i buchi lasciati dagli articoli più grandi. Se viene omesso, viene utilizzato un algoritmo "sparso", in cui l'algoritmo di posizionamento si sposta sempre "in avanti" nella griglia quando si posizionano gli elementi, senza mai tornare indietro per riempire i buchi. Ciò garantisce che tutti gli elementi posizionati automaticamente appaiano "in ordine", anche se questo lascia dei buchi che potrebbero essere stati riempiti da elementi successivi.

So che questa proprietà non è molto intuitiva, ma non dimenticarla mai quando affronti un problema di posizionamento. Prima di provare diverse configurazioni invano, aggiungilo perché potrebbe correggere il tuo layout senza ulteriori sforzi.

Perché non aggiungere sempre questa proprietà per impostazione predefinita?

Non lo consiglio perché, in alcuni casi, non vogliamo quel comportamento. Nota come la spiegazione dell'MDN menziona che fa sì che gli articoli fluiscano "fuori ordine" per riempire i buchi lasciati da articoli più grandi. L'ordine visivo è solitamente importante quanto l'ordine di origine, in particolare quando si tratta di interfacce accessibili e grid-auto-flow: dense a volte può causare una mancata corrispondenza tra l'ordine visivo e di origine.

Il nostro codice finale è quindi:

.grid {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: dense;
  grid-auto-rows: 100px;
}
.grid :nth-child(6n + 2) { grid-column: 1; }
.grid :nth-child(6n + 3) { grid-area: span 2/2; }
.grid :nth-child(6n + 4) { grid-row: span 2; }

Un altro? Andiamo!

Per questo, non parlerò troppo e ti mostrerò invece un'illustrazione del codice che ho usato. Prova a vedere se ottieni come ho raggiunto quel codice:

Gli elementi in nero sono implicitamente inseriti nella griglia. Va notato che possiamo ottenere lo stesso layout in più modi rispetto a come ci sono arrivato. Riesci a capire anche quelli? Che ne dici di usare grid-template-columns? Condividi i tuoi lavori nella sezione commenti.

Ti lascio con un ultimo schema:

Faccio avere una soluzione per questo, ma tocca a te esercitarti. Prendi tutto ciò che abbiamo imparato e prova a codificarlo da solo e quindi confrontalo con la mia soluzione. Non preoccuparti se finisci con qualcosa di prolisso: la cosa più importante è trovare una soluzione funzionante.

Voglio di più?

Prima di concludere, voglio condividere alcune domande di Stack Overflow relative a CSS Grid in cui sono intervenuto con risposte che utilizzano molte delle tecniche che abbiamo trattato insieme qui. È un buon elenco che mostra quanti casi d'uso reali e situazioni del mondo reale emergono in cui queste cose tornano utili:

Concludendo

CSS Grid è in circolazione da anni, ma ci sono ancora molti trucchi poco conosciuti e usati che non sono ampiamente discussi. La griglia implicita e le funzionalità di posizionamento automatico sono due di queste!

E sì, questo può diventare impegnativo! Mi ci è voluto molto tempo per ingannare la logica dietro le griglie implicite e continuo a lottare con il posizionamento automatico. Se vuoi dedicare più tempo a griglie esplicite e implicite, ecco un paio di spiegazioni ed esempi aggiuntivi che vale la pena dare un'occhiata:

Allo stesso modo, potresti voler leggere grid-auto-columns nel CSS-Tricks Almanac perché Mojtaba Seyedi va nei minimi dettagli e include immagini incredibilmente utili per aiutare a spiegare il comportamento.

Come ho detto quando abbiamo iniziato, i metodi che abbiamo trattato qui non intendono sostituire i metodi comuni che già conosci per la creazione di griglie. Sto semplicemente esplorando diversi modi che possono essere utili in alcuni casi.