Iclenmis CSS Gridlər

Grid sistemində öz yaratdığınız şəbəkəyə yeni bir iclənmiş grid əlavə etmək mümkündür. Iclənmiş gridlər sayt blokları daxilində kiçik elementləri yerləşdirmək üçün geniş istifadə olunur. Bu imkandan istifadə etmək üçün, ən uşaq elementdə özü display xassəsini grid qiyməti ilə təyin etmək lazımdır.

Nümunə üçün gəlin gridin bir xanasında başqa bir 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: 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;
}

Tutaq ki, sizin üç sütun üzrə yerləşən beş elementdən ibarət bir gridiniz var. Ikinci elementdə öz növbəsində üç uşaq elementi olan iclənmiş bir grid yaradın.

Əvvəlki məsələni elə dəyişin ki, iclənmiş griddə beş uşaq elementi olsun.

Birinci və üçüncü elementlərdə hər birində üç uşaq elementi olan iclənmiş grid yaradın.