Свойство grid-column в CSS
- Предыдущая страница grid-auto-rows
- Следующая страница grid-column-end
Определение и использование
Свойство grid-column определяет размер элемента сетки и его положение в сеточной разметке, и оно является сокращением следующих свойств:
Дополнительная информация:
CSS Уроки:CSS Grid Layout
Пример
Пример 1
Сделайте "item1" начинаться в столбце 1 и распространяться на два столбца:
.item1 {
grid-column: 1 / span 2;
}
Пример 2
Вы можете использовать значения линий столбца вместо количества столбцов, которые вы хотите跨越:
.item1 {
grid-column: 1 / 3;
}
CSS синтаксис
grid-column: grid-column-start / grid-column-end;
Значение свойства
| Значение | Описание |
|---|---|
| grid-column-start | Определяет, с какого столбца следует начинать отображение элемента. |
| grid-column-end | Определяет, на какой линии столбца (column-line) следует прекратить отображение элемента, или на сколько столбцов он должен распространяться. |
Технические детали
| Значение по умолчанию: | auto / auto |
|---|---|
| Инheritance: | Нет |
| Создание анимации: | Поддерживается. См. также:Свойства анимации. |
| Версия: | CSS Grid Layout Module Level 1 |
| JavaScript синтаксис: | object.style.gridColumn="2 / span 2" |
Поддержка браузерами
Числа в таблице указывают на первую версию браузера, которая полностью поддерживает этот атрибут.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 57 | 16 | 52 | 10 | 44 |
- Предыдущая страница grid-auto-rows
- Следующая страница grid-column-end
