Implicita grid i CSS

Implicit grid skapas automatiskt av webbläsaren, när antalet element inte får plats i det explicita griddet. Låt oss se hur detta händer.

Anta att vi har fyra block:

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

Anta att vårt grid har dimensionerna 3 gånger 3:

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

Låt oss placera våra tre block i griddet:

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

Och låt oss placera det fjärde blocket i den fjärde raden och kolumnen:

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

Eftersom vårt grid har dimensionerna 3 gånger 3, kommer den fjärde raden och kolumnen inte att finnas i detta grid. Men de kommer inte att finnas i explicit form, d.v.s. i den vi definierat. Men webbläsaren kommer att skapa dem implicit, d.v.s. själv.

Eftersom vi bara angav dimensioner för det explicita griddet, kommer storlekar för celler utanför detta grid att beräknas av webbläsaren. Det betyder att i vårt fall kommer storlekarna för det fjärde blocket att sättas automatiskt av webbläsaren.

Låt oss se vad vi får:

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

Anta att du har 6 block i ditt grid. Placera 3 block i det explicita griddet, och tre block i det implicita.