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

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

სინტაქსი

სელექტორი {
	grid-column-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;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-column-start: 1;
}
#elem2 {
	grid-column-start: 2;
}
#elem3 {
	grid-column-start: 3;
}

მაგალითი

ახლა კი თვისებაში grid-column-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;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-column-start: -1;
}
#elem2 {
	grid-column-start: -2;
}
#elem3 {
	grid-column-start: -3;
}

მაგალითი

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

<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,
რომელიც განსაზღვრავს ელემენტის საბოლოო პოზიციას ღრიდის სვეტებში
თვისება grid-column,
რომელიც განსაზღვრავს ელემენტის საწყის და საბოლოო პოზიციებს ღრიდის სვეტებში
თვისება grid-template-columns,
რომელიც განსაზღვრავს სვეტების რაოდენობას და სიგანეს ღრიდში
თვისება grid-auto-columns,
რომელიც განსაზღვრავს სვეტების რაოდენობას და სიგანეს იმპლიციტურ ღრიდში