grid-column-end

Свойство grid-column-end используется для определения конечной позиции элемента в колонке сетки. Иными словами, на какой колонке заканчивается элемент.

Краткая информация

Значение по умолчанию auto
Наследуется Нет
Применяется К грид-элементам и к абсолютно позиционированным элементам, содержащим грид-контейнер
Анимируется Нет

Синтаксис

grid-column-end: auto | <идентификатор> |
  [ [ <целое [-∞,-1]> | <целое [1,∞]> ] && <идентификатор>? ] |
  [ span && [ <целое [1,∞]> || <идентификатор> ] ]
Описание Пример
<тип> Указывает тип значения. <размер>
A && B Значения должны выводиться в указанном порядке. <размер> && <цвет>
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [,<время>]*
+ Повторять один или больше раз. <число>+
? Указанный тип, слово или группа не является обязательным. inset?
{A, B} Повторять не менее A, но не более B раз. <радиус>{1,4}
# Повторять один или больше раз через запятую. <время>#

Значения

auto
Автоматически определяет конечную позицию элемента.
<идентификатор>
Если есть колонка с именем <идентификатор>-end, то элемент заканчивается на этой колонке. В противном случае значение считается как 1 <идентификатор>.
<целое>
Элемент заканчивается на указанной колонке. Если используется отрицательное число, то считается в обратном порядке, начиная с начального края. Использовать 0 в качестве числа недопустимо.
<целое> <идентификатор>
При указании идентификатора считаются только колонки с этим именем.
span <целое>
Элемент растягивается на указанное число колонок, начиная с конечного края.
span <идентификатор>
Элемент растягивается до колонки с этим именем.

Пример

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>grid-column-end</title> <style> .grid { display: grid; /* Сетка */ grid-template-columns: 1fr 1fr 1fr; /* Колонки */ width: 500px; /* Ширина */ gap: 1rem; /* Расстояние между элементами */ } .grid-item > img { display: block; /* Убираем отступ снизу картинок */ max-width: 100%; /* Занимает всю ширину */ } .grid-item:nth-child(1) { background-color: bisque; /* Цвет фона */ padding: 1rem; /* Расстояние от текста до края */ } .grid-item:nth-child(2) { grid-column-end: span 2; /* Занимает две колонки */ } </style> </head> <body> <div class="grid"> <div class="grid-item"> <h2>Шато-де-Флёр</h2> <p>Часть бывшего киевского Царского сада.</p> </div> <div class="grid-item"> <img src="image/photo1.webp" alt="Шато-де-Флёр"> </div> <div class="grid-item"> <img src="image/thumb2.webp" alt=""> </div> <div class="grid-item"> <img src="image/thumb3.webp" alt=""> </div> <div class="grid-item"> <img src="image/thumb4.webp" alt=""> </div> </div> </body> </html>

Объектная модель

Объект.style.gridColumnEnd

Спецификация

Браузеры

16 57 44 10.1 52
57 52 43 10.3

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

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