Grades Implícitas no CSS

Uma grade implícita é criada automaticamente pelo navegador quando o número de elementos não cabe na grade explícita. Vamos ver como isso acontece.

Suponha que temos quatro blocos:

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

Suponha que nossa grade tenha dimensões 3 por 3:

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

Vamos posicionar nossos três blocos na grade:

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

E vamos posicionar o quarto bloco na quarta linha e coluna:

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

Como nossa grade tem dimensão 3 por 3, essa quarta linha e coluna não existem nesta grade. Mas não existirão de forma explícita, ou seja, na que definimos. Mas o navegador as criará de forma implícita, ou seja, sozinho.

Nesse caso, como especificamos as dimensões apenas para a grade explícita, então para as células fora dessa grade as dimensões serão calculadas pelo navegador. Ou seja, no nosso caso, as dimensões do quarto bloco serão definidas automaticamente pelo navegador.

Vamos ver o que obtemos:

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

Suponha que você tenha 6 blocos em sua grade. Posicione 3 blocos na grade explícita e três blocos na implícita.