Implisiete roosters in CSS

Implisiete rooster word outomaties deur die blaaier geskep wanneer die aantal elemente nie in die eksplisiete rooster pas nie. Kom ons kyk hoe dit gebeur.

Gestel ons het vier blokke:

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

Gestel ons rooster het afmetings 3 by 3:

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

Laat ons drie van ons blokke op die rooster plaas:

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

En die vierde blok plaas ons in die vierde ry en kolom:

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

Aangesien ons rooster 'n grootte van 3 by 3 het, sal daar nie so 'n vierde ry en kolom in hierdie rooster wees nie. Maar hulle sal nie in eksplisiete vorm wees nie, dit is in die vorm wat ons gespesifiseer het. Maar die blaaier sal hulle implisiet skep, dit wil sê self.

Terselfdertyd, aangesien ons afmetings slegs vir die eksplisiete rooster gespesifiseer het, sal die afmetings vir selle buite hierdie rooster deur die blaaier bereken word. Dit wil sê in ons geval sal die afmetings van die vierde blok outomaties deur die blaaier gestel word.

Kom ons kyk wat ons as gevolg kry:

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

Gestel jou rooster het 6 blokke. Plaas 3 blokke in die eksplisiete rooster, en drie blokke in die implisiete.