Afmetingen van impliciete grids in CSS

Een impliciet grid bepaalt zelf de afmetingen van die elementen, die buiten zijn grenzen vallen. Echter, wanneer noodzakelijk kunnen deze afmetingen worden ingesteld met behulp van de eigenschappen grid-auto-columns en grid-auto-rows.

Laten we dit doen:

<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-auto-columns: 100px;
	grid-auto-rows: 100px;
	
	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;
}

Stel dat je grid 9 blokken heeft. Plaats een deel van de blokken in het expliciete grid, en een deel van de blokken in het impliciete grid. Stel de afmetingen in voor de blokken in het impliciete deel.