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