CSSda Maxfiy Gridlar

Maxfiy grid brauzer tomonidan avtomatik ravishda yaratiladi, elementlar soni aniq gridga sig'maganda. Buning qanday sodir bo'lishini ko'ramiz.

Aytaylik, bizda to'rtta blok bor:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
</div>

Bizning gridimiz o'lchamlari 3 ga 3 bo'lsin:

#parent {
	display: grid;
	grid-template-columns: 50px 50px 50px;
	grid-template-rows: 50px 50px 50px;
}

Uchta blokimizni grid bo'yicha joylashtiramiz:

#elem1 {
	grid-row: 1 / 2;
	grid-column: 1 / 2;
}
#elem2 {
	grid-row: 2 / 3;
	grid-column: 2 / 3;
}
#elem3 {
	grid-row: 3 / 4;
	grid-column: 3 / 4;
}

To'rtinchi blokni esa to'rtinchi qator va ustunga joylashtiramiz:

#elem4 {
	grid-row: 4 / 5;
	grid-column: 4 / 5;
}

Bizning gridimiz o'lchami 3 ga 3 bo'lgani uchun, unday to'rtinchi qator va ustun bu gridda bo'lmaydi. Lekin ular aniq ko'rinishda bo'lmaydi, ya'ni biz belgilagandek. Ammo brauzer ularni maxfiy ravishda, ya'ni o'zi yaratadi.

Bunda, chunki o'lchamlarni faqat aniq grid uchun ko'rsatgan edik, shu griddan tashqaridagi katakchalar uchun o'lchamlar brauzer tomonidan hisoblanadi. Ya'ni bizning holatda to'rtinchi blokning o'lchamlari brauzer tomonidan avtomatik belgilanadi.

Keling, nima natija oldigimizni ko'ramiz:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 50px 50px 50px;
	grid-template-rows: 50px 50px 50px;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 2;
	grid-column: 1 / 2;
}
#elem2 {
	grid-row: 2 / 3;
	grid-column: 2 / 3;
}
#elem3 {
	grid-row: 3 / 4;
	grid-column: 3 / 4;
}
#elem4 {
	grid-row: 4 / 5;
	grid-column: 4 / 5;
}

Aytaylik, sizning gridingizda 6 ta blok bor. 3 ta blokni aniq gridda joylashtiring, qolgan uchta blokni esa maxfiy gridda.