Subgridi katika CSS

Subgridi ni tofauti ya gridi iliyowekwa ndani, lakini tofauti nayo huathiri ukubwa wa kontena mzazi wa gridi. Ili kuweka subgridi, inahitajika katika kipengele cha mwenyewe cha mtoto kuweka sifa display yenye thamani subgrid.

Kwa mfano, hebu tuunde gridi iliyowekwa ndani kwenye kipengele cha nne:

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

Acha uwe na gridi inayojumuisha vipengele vitano, vilivyopangwa katika safu wima mbili. Unde gridi iliyowekwa ndani kwenye kipengele cha tatu, ambayo kwa upande wake itakuwa na vipengele viwili vya watoto.

Badilisha shida iliyotangulia, ili katika gridi iliyowekwa ndani iwe na vipengele vinne vya watoto.

Unde gridi mbili zilizowekwa ndani - katika kipengele cha pili na kipengele cha tano.