CSS'теги Подгриддер

Подгрид ички тургулган тордун бир түрү болуп эсептелет, бирок анын айырмасы ал ата-эне тор контейнеринин өлчөмүнө таасир этет. Подгридди орнотуу үчүн, түздөн-түз бала элементте display касиетине subgrid маанисин берүү керек.

Мисал үчүн, төртүнчү элементте ички тургулган тор түзөлү:

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

Сизде эки тилке менен жайгашкан беш элементтен турган тор бар деп коёлу. Үчүнчү элементте ички тургулган тор түзүңүз, ал өз кезегинде эки бала элементтен туруш керек.

Мурунку тапшырманы ички тургулган тордо төрт бала элемент болушу үчүн өзгөртүңүз.

Эки ички тургулган тор түзүңүз - экинчи элементте жана бешинчи элементтерде.