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