CSS-də Subgridlər

Subgrid, iç-içə gridin bir növüdür, lakin ondan fərqli olaraq, valideyn grid konteynerinin ölçüsünə təsir göstərir. Subgrid təyin etmək üçün, birbaşa uşaq elementdə display xassəsini subgrid qiyməti ilə təyin etmək lazımdır.

Nümunə üçün, gəlin dördüncü elementdə iç-içə grid yaradaq:

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

Tutaq ki, sizin iki sütun üzərində yerləşən beş elementdən ibarət bir gridiniz var. Üçüncü elementdə öz növbəsində iki uşaq element olan bir iç-içə grid yaradın.

Əvvəlki məsələni elə dəyişin ki, iç-içə griddə dörd uşaq element olsun.

İki iç-içə grid yaradın - ikinci elementdə və beşinci elementdə.