Apakšrežģi CSS

Apakšrežģis ir ligzdota režģa variācija, bet atšķirībā no tā, tas ietekmē vecāka režģa konteinera izmēru. Lai izveidotu apakšrežģi, ir jāiestata display īpašība ar vērtību subgrid pašā apakšējā elementā.

Piemēram, izveidosim ceturtajā elementā ligzdotu režģi:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">
		<div>5</div>
		<div>6</div>
		<div>7</div>
		<div>8</div>
	</div>
</div>

#parent {
	display: grid;
	grid-template: 1fr 1fr / 1fr 1fr;
	grid-gap: 5px;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem4 {
	display: subgrid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	grid-gap: 5px;
	border: 2px solid #696989;
	padding: 5px;
}
#elem4 > div {
	grid-gap: 5px;
	padding: 6px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Pieņemsim, ka jums ir režģis, kas sastāv no pieciem elementiem, kas izvietoti divās kolonnās. Trešajā elementā izveidojiet ligzdotu režģi, kurā atradīsies divi apakšējie elementi.

Modificējiet iepriekšējo uzdevumu tā, lai ligzdotajā režģī atrastos četri apakšējie elementi.

Izveidojiet divus ligzdotus režģus - otrajā elementā un piektajā elementā.