Својството 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,
кое го задава бројот и ширината на колоните во имплицитен грид