CSS-də Gizli Gridlər

Gizli grid brauzer tərəfindən avtomatik yaradılır, elementlərin sayı aşkar gridə sığmadıqda. Gəlin görək bu necə baş verir.

Tutaq ki, bizim dörd blokumuz var:

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

Tutaq ki, bizim gridin ölçüləri 3 ə 3-dür:

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

Gəlin üç blokumuzu grid üzərində yerləşdirək:

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

Dördüncü bloku isə dördüncü sətir və sütunda yerləşdirək:

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

Gridimiz 3 ə 3 ölçüdə olduğu üçün, dördüncü sətir və sütun bu griddə olmayacaq. Lakin onlar aşkar şəkildə olmayacaq, yəni bizim təyin etdiyimizdə. Lakin brauzer onları gizli olaraq, yəni özü yaradacaq.

Eyni zamanda, biz ölçüləri yalnız aşkar grid üçün göstərdiyimizdən, bu gridin xaricindəki xanaların ölçüləri brauzer tərəfindən hesablanacaq. Yəni bizim vəziyyətimizdə dördüncü blokun ölçüləri brauzer tərəfindən avtomatik təyin olunacaq.

Gəlin nə əldə etdiyimizə baxaq:

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

Tutaq ki, sizin gridinizdə 6 blok var. 3 bloku aşkar griddə, üç bloku isə gizli griddə yerləşdirin.