CSS grid-column-end Свойство
Пример
Сделать "Item1" span 3 колонки:
.item1 {
grid-column-end: span 3;
}
Определение и использование
Свойство grid-column-end определяет, сколько столбцов будет охватывать элемент, или на каком столбце-строке будет заканчиваться элемент (см. пример в конце этой страницы).
| Значение по умолчанию: | auto |
|---|---|
| Inherited: | no |
| Animatable: | yes. Читайте о animatable |
| Version: | Модуль макета сетки CSS уровень 1 |
| Синтаксис JavaScript: | object.style.gridColumnEnd="5" |
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| grid-column-end | 57 | 16 | 52 | 10 | 44 |
Синтаксис CSS
grid-column-end:
auto|column-line|span n;
Значения свойств
| Значение | Описание | |
|---|---|---|
| auto | Значение по умолчанию. Элемент будет охватывать один столбец. | |
| span n | Указывает количество столбцов, которое будет охватывать элемент. | |
| column-line | Указывает, в каком столбце следует завершить отображение элемента. |
Другие примеры
Пример
Можно использовать значения строк столбцов, а не число столбцов для Span:
.item1 {
grid-column-end: 3;
}
Похожие страницы
CSS Справочник: CSS Grid Layout