Grootte van implisiete roosters in CSS

'n Implisiete rooster bepaal self die groottes van daardie elemente wat buite sy grense val. Indien nodig kan hierdie groottes egter ingestel word met behulp van die eienskappe grid-auto-columns en grid-auto-rows.

Kom ons doen dit:

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

Laat daar 9 blokke in jou rooster wees. Plaas 'n gedeelte van die blokke in die eksplisiete rooster, en 'n gedeelte van die blokke in die implisiete rooster. Stel die groottes van die blokke in die implisiete gedeelte in.