Ҷамъоварии сатрҳо дар CSS Grid

Сатрҳо ва сутунҳо дар grid-ҳо шабака месозанд. Мумкин аст элементро чунон сохт, ки якчанд ҳуҷайраҳои шабакаро ишғол кунад, на танҳо якто.

Барои он ки элемент беш аз як сатрро ишғол кунад, бояд ба он хусусияти grid-row таъин кард. Дар ин хусусият, тавассути кача, рақамҳое муайян карда мешаванд, ки нуқти оғоз ва анҷоми ҷойгиршавии элементҳоро дар grid нишон медиҳанд.

Дар ин ҳол, элемент аз нуқти якум то нуқти дуюм (ба он ҳисоб нашуда) дароз мешавад. Яъне қимати 1 / 2 элементро вазорат мекунад, ки ҳуҷайраи якумро ишғол кунад, ва қимати 1 / 3 элементро вазорат мекунад, ки ҳуҷайраҳои якум ва дуюмро (аммо ба ҳисоби сеюм нагирад) ишғол кунад.

Намуна

Фарз мекунем, ки мо grid-е бо се элементҳои фарзанд дорем. Биёед онҳоро чунон ҷойгир кунем, ки элементҳои якум ду сатрро ишғол кунанд:

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

#parent {
	display: grid;
	grid-template-columns: 2fr 1fr;
	height: 300px;
	width: 400px;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 3; /* ду сатр */
}
#elem2 {
	grid-row: 1 / 2;
}
#elem3 {
	grid-row: 2 / 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: 2fr 1fr;
	height: 300px;
	width: 400px;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 2;
}
#elem2 {
	grid-row: 2 / 3;
}
#elem3 {
	grid-row: 3 / 4;
}
#elem4 {
	grid-row: 1 / 4;
}

Масъалаҳои амалӣ

Ҳама элементҳоро ҷойгир кунед ва ҳамроҳшавии сатрҳоро мувофиқи намунаи зерин анҷом диҳед: