Свойство CSS grid-column-end
Пример
Сделайте так, чтобы "item1" занимал 3 столбца:
.item1 {
grid-column-end: span 3;
}
Определение и использование
Свойство grid-column-end
определяет, сколько столбцов будет охватывать элемент или на какой строке столбца элемент будет заканчиваться (см. пример в конце этой страницы).
Значение по умолчанию: | авто |
---|---|
Унаследовано: | нет |
Анимация: | да. Читать об анимации |
Версия: | Модуль CSS Grid Layout Уровень 1 |
Синтаксис JavaScript: | объект .style.gridColumnEnd = "5" |
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает это свойство.
Property | |||||
---|---|---|---|---|---|
grid-column-end | 57 | 16 | 52 | 10 | 44 |
Синтаксис CSS
grid-column-end:
auto|span n|column-line;
Значения свойств
Value | Description | Play it |
---|---|---|
auto | Default value. The item will span one column | |
span n | Specifies the number of columns the item will span | |
column-line | Specifies on which column to end the display of the item |
Дополнительные примеры
Пример
Вы можете использовать значения строки столбца вместо количества столбцов для охвата:
.item1 {
grid-column-end: 3;
}
Связанные страницы
Учебное пособие по CSS: CSS Grid Layout