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