Iegultie CSS režģi

Režģu sistēmā ir iespēja pievienot savā izveidotajā tīklā jaunu iegultu režģi. Iegultie režģi tiek plaši izmantoti, lai izvietotu mazus elementus vietnes bloku iekšpusē. Lai izmantotu šo iespēju, ir nepieciešams pašā apakšējā elementā iestatīt īpašību display ar vērtību grid.

Piemēram, izveidosim vienā no režģa šūnām vēl vienu 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: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	grid-gap: 5px;
	border: 2px solid #696989;
}
#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 trīs kolonnās. Izveidojiet otrajā elementā iegultu režģi, kurā savukārt būs trīs apakšējie elementi.

Mainiet iepriekšējo uzdevumu tā, lai iegultajā režģī atrastos pieci apakšējie elementi.

Izveidojiet pirmajā un trešajā elementā pa iegultam režģim ar trim apakšējiem elementiem.