Implisiittiset gridit CSS:ssä

Implisiittinen gridi luodaan automaattisesti selaimella, kun elementtien määrä ei mahdu eksplisiittiseen gridiin. Katsotaan, kuinka tämä tapahtuu.

Oletetaan, että meillä on neljä lohkoa:

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

Oletetaan, että gridimme on kooltaan 3 kertaa 3:

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

Sijoitetaan kolme lohkoamme gridin mukaisesti:

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

Ja neljäs lohko sijoitetaan neljänteen riviin ja sarakkeeseen:

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

Koska gridimme on kooltaan 3 kertaa 3, tällaista neljättä riviä ja saraketta ei ole tässä gridissä. Mutta niitä ei ole eksplisiittisesti, eli meidän määrittelemämme. Mutta selain luo ne implisiittisesti, eli itse.

Tässä tapauksessa, koska määritsimme koot vain eksplisiittiselle gridille, niille soluille, jotka ovat tämän gridin ulkopuolella, koot lasketaan selaimen toimesta. Eli meidän tapauksessamme neljännen lohkon koot asetetaan automaattisesti selaimen toimesta.

Katsotaan, mitä saamme:

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

Oletetaan, että gridissäsi on 6 lohkoa. Sijoita 3 lohkoa eksplisiittiseen gridiin, ja kolme lohkoa implisiittiseen.