Имплицитни решетки во CSS

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

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

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem3">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 блока во експлицитната мрежа, а три блока во имплицитната.