Implicit Grids in CSS

The implicit grid is created automatically by the browser when the number of items does not fit into the explicit grid. Let's see how this happens.

Let's say we have four blocks:

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

Let's say our grid has dimensions 3 by 3:

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

Let's place our three blocks on a grid:

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

And we will place the fourth block in the fourth row and column:

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

Since our grid is 3 by 3, there will be no such fourth row and column in this grid. But they will not be in explicit form, that is, in the form we set. But the browser will create them implicit, that is, itself.

In this case, we have specified the sizes only for the explicit grid, but for cells outside this grid the sizes will be calculated by the browser. That is, in our case the sizes of the fourth block will be set by the browser automatically.

Let's see what we get:

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

Let's say you have 6 blocks in your grid. Place 3 blocks in the explicit grid, and three blocks in the implicit grid.