Свойство CSS grid-column-end

Определение и использование

grid-column-end определяет, через сколько столбцов будет проходить элемент, или на какой линии столбца (column-line) элемент будет заканчиваться.

См. примеры в конце страницы.

См. также:

CSS учебник:CSS сетка

Пример

Пример 1

Сделайте "item1" простирающимся на три столбца:

.item1 {
  grid-column-end: span 3;
}

Попробуйте сами

Пример 2

Вы можете использовать значение столбца вместо количества столбцов, через которые будет проходить элемент:

.item1 {
  grid-column-end: 3;
}

Попробуйте сами

CSS синтаксис

grid-column-end: auto|span n|column-line;

Значение свойства

Значение Описание
auto Значение по умолчанию. Элемент будет проходить через один столбец.
span n Определяет количество столбцов, через которые будет проходить элемент.
column-line Определяет, в каком столбце заканчивается отображение элемента.

Технические детали

Значение по умолчанию: auto
Инheritance: Нет
Создание анимации: Поддерживается. См. также:Свойства анимации.
Версия: CSS Grid Layout Module Level 1
JavaScript синтаксис: object.style.gridColumnEnd="5"

Поддержка браузерами

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает этот атрибут.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44