რიგების გაერთიანება CSS გრიდებში

რიგები და სვეტები გრიდებში ქმნის ბადეს. შესაძლებელია ელემენტმა დაიკავოს არა ერთი უჯრა ბადეში, არამედ რამდენიმე.

იმისთვის, რომ ელემენტმა დაიკავოს ერთზე მეტი რიგი, მას უნდა მივანიჭოთ თვისება grid-row. ამ თვისებაში ხაზით გამოყოფილია რიცხვები, რომლებიც მიუთითებს საწყის და საბოლოო პოზიციაზე ელემენტების გრიდში.

ამ შემთხვევაში ელემენტი გაიჭიმება პირველი პოზიციიდან მეორე პოზიციამდე (მისი ჩათვლით არა). ანუ მნიშვნელობა 1 / 2 აიძულებს ელემენტს დაიკავოს მხოლოდ პირველი უჯრა, ხოლო მნიშვნელობა 1 / 3 აიძულებს ელემენტს დაიკავოს პირველი და მეორე უჯრა (მაგრამ მესამეს ჩათვლით არა).

მაგალითი

დავუშვათ, გვაქვს გრიდი სამი შვილობილი ელემენტით. მოდით განვათავსოთ ისინი ისე, რომ პირველი ელემენტი დაიკავოს ორი რიგი:

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

პრაქტიკული ამოცანები

განათავსეთ ყველა ელემენტი და შეასრულეთ რიგების გაერთიანება შემდეგი მაგალითის შესაბამისად: