Gridҳои нозоҳир дар CSS

Grid-и нозоҳир тавассути браузер ба таври худкор сохта мешавад, вақте ки шумораи элементҳо дар grid-и зоҳирӣ намеғунҷад. Биёед бубинем, ки ин чӣ гуна рӯй медиҳад.

Бигзор мо чор блок дошта бошем:

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

Бигзор андозаи grid-и мо 3 ба 3 бошад:

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

Биёед се блоки худро дар grid ҷойгир кунем:

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

Азбаски grid-и мо андозааш 3 ба 3 аст, пас чунин сатри чаҳорум ва сутуни чаҳорум дар ин grid вуҷуд надорад. Аммо онҳо дар шакли зоҳирӣ вуҷуд надоранд, яъне дар он чи ки мо муайян кардаем. Аммо браузер онҳоро ба таври нозоҳир, яъне худ, месозад.

Дар ин ҳол, азбаски андозахоро мо танҳо барои grid-и зоҳирӣ муайян кардаем, пас барои ҳуҷайраҳое, ки берун аз ин grid ҳастанд, андозаҳо тавассути браузер ҳисоб карда мешаванд. Яъне дар ҳолати мо андозаҳои блоки чаҳорум тавассути браузер ба таври худкор муайян карда мешаванд.

Биёед бубинем, ки дар натиҷа чӣ ба даст меояд:

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

Бигзор дар grid-и шумо 6 блок бошад. 3 блокро дар grid-и зоҳирӣ ҷойгир кунед, ва се блокро дар grid-и нозоҳир.