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

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

სინტაქსი

სელექტორი {
	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;
	padding: 10px;
	width: 400px;
	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;
}

მაგალითი

მოდით, პირველი ბლოკი ორ რიგს დაიკავებინოს:

<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-start და grid-row-end მივუთითოთ უარყოფითი რიცხვები. ახლა 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;
	grid-row-end: -2;
}
#elem2 {
	grid-row-start: -2;
	grid-row-end: -3;
}
#elem3 {
	grid-row-start: -3;
	grid-row-end: -4;
}

იხილეთ აგრეთვე

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