Nëngrila në CSS

Nëngrila është një variacion i rrjetës së brendshme, por ndryshe nga ajo, ndikon në madhësinë e kontenierit prind të rrjetës. Për të vendosur një nëngrilë, duhet që në vetë elementin fëmijë të vendosni vetinë display me vlerën subgrid.

Për shembull, le të krijojmë një rrjetë të brendshme në elementin e katërt:

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

Supozoni se keni një rrjetë, e përbërë nga pesë elemente, të vendosura në dy kolonë. Krijoni një rrjetë të brendshme në elementin e tretë, në të cilën nga ana tjetër do të ketë dy elementë fëmijë.

Ndryshoni detyrën e mëparshme në mënyrë që në rrjetën e brendshme të ketë katër elementë fëmijë.

Krijoni dy rrjetë të brendshme - në elementin e dytë dhe në elementin e pestë.