თვისება grid-row-start

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

სინტაქსი

სელექტორი {
	grid-row-start: დადებითი ან უარყოფითი რიცხვი;
}

მაგალითი

მოდით, გრიდში არსებულ ელემენტებს მივანიჭოთ საწყისი პოზიციები:

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

#parent {
	display: grid;
	padding: 10px;
	width: 400px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row-start: 1;
}
#elem2 {
	grid-row-start: 2;
}
#elem3 {
	grid-row-start: 3;
}

მაგალითი

ახლა კი თვისებაში grid-row-start მივუთითოთ უარყოფითი რიცხვები. ახლა elem3 დაიკავებს ყველაზე ზედა რიგს, ხოლო elem1 - ყველაზე ქვედას:

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

#parent {
	display: grid;
	padding: 10px;
	width: 400px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row-start: -1;
}
#elem2 {
	grid-row-start: -2;
}
#elem3 {
	grid-row-start: -3;
}

მაგალითი

შევქმნათ ისე, რომ პირველი ბლოკი დაიკავოს ორი რიგი. ამისთვის დაგვჭირდება ერთად გამოვიყენოთ თვისებები grid-row-start და grid-row-end:

<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-start: 1;
	grid-row-end: 3;
}
#elem2 {
	grid-row-start: 1;
	grid-row-end: 2;
}
#elem3 {
	grid-row-start: 2;
	grid-row-end: 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-start: 1;
	grid-row-end: 2;
}
#elem2 {
	grid-row-start: 2;
	grid-row-end: 3;
}
#elem3 {
	grid-row-start: 3;
	grid-row-end: 4;
}
#elem4 {
	grid-row-start: 1;
	grid-row-end: 4;
}

ასევე იხილეთ

თვისება grid-row-end,
რომელიც განსაზღვრავს ელემენტის საბოლოო პოზიციას გრიდში რიგების მიმართ
თვისება grid-row,
რომელიც განსაზღვრავს ელემენტის საწყის და საბოლოო პოზიციებს გრიდში რიგების მიმართ
თვისება grid-template-rows,
რომელიც განსაზღვრავს რიგების რაოდენობას და სიგანეს გრიდში
თვისება grid-auto-rows,
რომელიც განსაზღვრავს რიგების რაოდენობას და სიგანეს იმპლიციტურ გრიდში