Implicitni gridovi u CSS-u

Implicitni grid browser automatski kreira kada se elementi ne uklapaju u eksplicitnu mrežu. Pogledajmo kako se to dešava.

Neka imamo četiri bloka:

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

Neka naša mreža ima dimenzije 3 po 3:

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

Postavimo tri naša bloka prema mreži:

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

A četvrti blok postavimo u četvrtom redu i koloni:

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

Pošto je naša mreža dimenzija 3 po 3, takvog četvrtog reda i kolone u ovoj mreži neće biti. Ali neće ih biti u eksplicitnom vidu, odnosno u onom koji smo mi zadali. Međutim, browser će ih kreirati implicitno, odnosno sam.

Pritom, kako smo veličine naveli samo za eksplicitnu mrežu, onda će za ćelije izvan te mreže veličine biti određene od strane browsera. Odnosno, u našem slučaju veličine četvrtog bloka će browser automatski postaviti.

Pogledajmo šta smo dobili:

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

Neka u vašoj mreži ima 6 blokova. Postavite 3 bloka u eksplicitnoj mreži, a tri bloka u implicitnoj.