Griglie implicite in CSS

Una griglia implicita viene creata automaticamente dal browser quando il numero di elementi non rientra nella griglia esplicita. Vediamo come funziona.

Supponiamo di avere quattro blocchi:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem3">4</div>
</div>

Supponiamo che la nostra griglia abbia dimensioni 3 per 3:

#parent {
	display: grid;
	grid-template-columns: 50px 50px 50px;
	grid-template-rows: 50px 50px 50px;
}

Posizioniamo tre dei nostri blocchi nella griglia:

#elem1 {
	grid-row: 1 / 2;
	grid-column: 1 / 2;
}
#elem2 {
	grid-row: 2 / 3;
	grid-column: 2 / 3;
}
#elem3 {
	grid-row: 3 / 4;
	grid-column: 3 / 4;
}

E posizioniamo il quarto blocco nella quarta riga e colonna:

#elem4 {
	grid-row: 4 / 5;
	grid-column: 4 / 5;
}

Dato che la nostra griglia ha dimensioni 3 per 3, questa quarta riga e colonna non esisteranno nella griglia. Ma non esisteranno in forma esplicita, cioè in quella da noi definita. Tuttavia il browser le creerà implicitamente, cioè da solo.

Inoltre, poiché abbiamo specificato le dimensioni solo per la griglia esplicita, per le celle al di fuori di questa griglia le dimensioni saranno calcolate dal browser. Cioè nel nostro caso le dimensioni del quarto blocco saranno impostate automaticamente dal browser.

Vediamo cosa otteniamo:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 50px 50px 50px;
	grid-template-rows: 50px 50px 50px;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 2;
	grid-column: 1 / 2;
}
#elem2 {
	grid-row: 2 / 3;
	grid-column: 2 / 3;
}
#elem3 {
	grid-row: 3 / 4;
	grid-column: 3 / 4;
}
#elem4 {
	grid-row: 4 / 5;
	grid-column: 4 / 5;
}

Supponiamo che la tua griglia abbia 6 blocchi. Posiziona 3 blocchi nella griglia esplicita e tre blocchi in quella implicita.