Имплицитне мреже у CSS-у

Имплицитна мрежа се аутоматски креира у браузеру када се број елемената не уклапа у експлицитну мрежу. Хајде да видимо како се то дешава.

Претпоставимо да имамо четири блока:

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

Претпоставимо да наша мрежа има димензије 3 са 3:

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

Поставимо три наша блока у мрежу:

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

Пошто је наша мрежа димензија 3 са 3, таквог четвртог реда и колоне у овој мрежи неће бити. Али неће их бити у експлицитном облику, тј. у оном који смо задали. Међутим, браузер ће их имплицитно креирати, тј. сам.

При томе, пошто смо димензије навели само за експлицитну мрежу, за ћелије изван те мреже димензије ће бити израчунате од стране браузера. Тј. у нашем случају димензије четвртог блока ће бити задате аутоматски од стране браузера.

Хајде да видимо шта смо добили:

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

Претпоставимо да у вашој мрежи има 6 блокова. Поставите 3 блока у експлицитну мрежу, а три блока у имплицитну.