Неявни гридове в 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 блока в явната мрежа, а три блока в неявната.