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

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

თვისების grid-column-end მნიშვნელოვანი ნიუანსი შემდეგში მდგომარეობს, რომ მითითებული სვეტის ნომერი არ შედის დასასრულ პოზიციაში - თუ ჩვენ დავაყენებთ რიცხვს 3, მაშინ ელემენტი დაიკავებს მხოლოდ პირველ და მეორე სვეტებს.

სინტაქსი

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

მაგალითი

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

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

#parent {
	display: grid;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

#elem1 {
	grid-column-start: 1;
	grid-column-end: 2;
}
#elem2 {
	grid-column-start: 1;
	grid-column-end: 3;
}
#elem3 {
	grid-column-start: 1;
	grid-column-end: 4;
}

მაგალითი

ახლა კი თვისების grid-column-start დახმარებით გავაკეთოთ ისე, რომ პირველი, მეორე და მესამე ელემენტები განთავსდნენ პირველ რიგში. მეოთხე ელემენტი კი დაეკავოს მთელი მეორე რიგი:

<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;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-column-start: 1;
	grid-column-end: 2;
}
#elem2 {
	grid-column-start: 2;
	grid-column-end: 3;
}
#elem3 {
	grid-column-start: 3;
	grid-column-end: 4;
}
#elem4 {
	grid-column-start: 1;
	grid-column-end: 4;
}

მაგალითი

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

<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;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-column-start: 1;
	grid-column-end: 4;
}
#elem2 {
	grid-column-start: 2;
	grid-column-end: 3;
}
#elem3 {
	grid-column-start: 1;
	grid-column-end: 2;
}
#elem4 {
	grid-column-start: 3;
	grid-column-end: 4;
}

მაგალითი

ახლა მოდით თვისებაში grid-column-end მივუთითოთ უარყოფითი რიცხვები:

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

#parent {
	display: grid;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

#elem1 {
	grid-column-start: 1;
	grid-column-end: -4;
}
#elem2 {
	grid-column-start: 1;
	grid-column-end: -3;
}
#elem3 {
	grid-column-start: 1;
	grid-column-end: -2;
}

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

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