Implicitte grids i CSS

Implicit grid oprettes automatisk af browseren, når antallet af elementer ikke passer i det eksplicitte grid. Lad os se på, hvordan det foregår.

Antag, at vi har fire blokke:

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

Antag, at vores grid har dimensionerne 3 gange 3:

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

Lad os placere vores tre første blokke i griddet:

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

Og vi placerer den fjerde blok i den fjerde række og kolonne:

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

Da vores grid har en størrelse på 3 gange 3, vil sådan en fjerde række og kolonne ikke eksistere i dette grid. Men de eksisterer ikke i eksplicit form, altså i den form, vi har defineret. Men browseren vil oprette dem implicit, dvs. automatisk.

Da vi kun har angivet størrelser for det eksplicitte grid, vil størrelserne for celler uden for dette grid blive beregnet af browseren. Det betyder, at i vores tilfælde vil størrelsen af den fjerde blok blive sat automatisk af browseren.

Lad os se, hvad vi får:

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

Antag, at dit grid har 6 blokke. Placer 3 blokke i det eksplicitte grid, og tre blokke i det implicitte grid.