Неявные гриды в 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, то такого четвертого ряда и колонки в этой сетке не будет. Но их не будет в явном виде, то есть в заданном нами. Но браузер создаст их неявно, то есть сам.

При этом, так размеры мы указали только для явной сетки, то для ячеек вне этой сетки размеры будут рассчитаны браузером. To есть в нашем случае размеры четвертого блока будут заданы браузером автоматически.

Давайте посмотрим, что у нас получится:

<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 блока в явной сетке, а три блока в неявной.