CSS-теги жашырын торлор

Жашырын тор браузер тарабынан автоматтык түрдө түзүлөт, эгерде элементтердин саны ачык торго сыйбаса. Келгиле, бул кандайча болорун карап көрөлү.

Бизде төрт блок болсун:

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

Биздин тордун өлчөмү 3 боюнча 3 болсун:

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

Үч блокту торго жайгаштыралы:

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

Биздин тордун өлчөмү 3 боюнча 3 болгондуктан, тордо мындай төртүнчү катар жана тилке болбойт. Бирок алар ачык түрдө болбойт, биз белгилегендей. Бирок браузер аларды жашырын түрдө түзөт, б.а. өзү.

Бул учурда, биз өлчөмдөрдү ачык тор үчүн гана көрсөткөндүктөн, ушул тордун сыртындагы уячалардын өлчөмдөрү браузер тарабынан эсептелет. Б.а. биздин учурда төртүнчү блоктун өлчөмдөрү браузер тарабынан автоматтык түрдө белгиленет.

Келгиле, эмне чыгарын карап көрөлү:

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

Сиздин тордо 6 блок болсун. 3 блокту ачык торго жайгаштырыңыз, ал эми үч блокту жашырын торго.