CSS-däki gizlin gridler

Gizlin grid brauzer tarapyndan awtomatiki ýöredilýär, elementleriň sany açyk gride ýerleşmez wagty. Buň nädip ýüze çykýandygyna seredeliň.

Dört blokymyz bardyr diýeliň:

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

Gridimiziň ölçegi 3 x 3 bolsun:

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

Üç blogymyzy gride ýerleşdireliň:

#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ünji blogy bolsa dördünji hatarda we dördünji sütunda ýerleşdireliň:

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

Gridimiz 3 x 3 ölçegli bolany üçin, dördünji hatar we sütun şu gridde bolmaz. Ýöne olar açyk görnüşde, ýagny biz kesgitlänimizde, bolmaz. Ýöne brauzer olary gizlin, ýagny özi, döreder.

Şeýle hem, ölçegleri diňe açyk grid üçin görkezendenimiz üçin, şu gridiň daşyndaky öýjükleriň ölçegleri brauzer tarapyndan hasaplanylar. Ýagny bizim ýagdaýymyzda dördünji blokiň ölçegleri brauzer tarapyndan awtomatiki belgiler.

Näme çykyjagyny göreliň:

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

Siziň gridiňizde 6 blok bolsun. 3 blogy açyk gridde, üç blogy bolsa gizlin gride ýerleşdiriň.