Impliciete grids in CSS

Impliciet grid wordt automatisch door de browser aangemaakt, wanneer het aantal elementen niet in het expliciete grid past. Laten we eens kijken hoe dit gebeurt.

Stel we hebben vier blokken:

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

Stel dat ons grid de afmetingen heeft van 3 bij 3:

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

Laten we drie van onze blokken plaatsen in het grid:

#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;
}

En het vierde blok plaatsen we in de vierde rij en kolom:

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

Omdat ons grid een afmeting heeft van 3 bij 3, zullen deze vierde rij en kolom niet in dit grid aanwezig zijn. Maar ze zijn er niet in expliciete vorm, dus zoals door ons gedefinieerd. Maar de browser zal ze impliciet aanmaken, dus automatisch.

Omdat we alleen afmetingen hebben opgegeven voor het expliciete grid, zullen voor cellen buiten dit grid de afmetingen worden berekend door de browser. Dat betekent in ons geval dat de afmetingen van het vierde blok automatisch door de browser worden ingesteld.

Laten we eens kijken wat we krijgen:

<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;
}

Stel dat je grid 6 blokken heeft. Plaats 3 blokken in het expliciete grid, en drie blokken in het impliciete grid.