grid-column

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.

Сокращённое CSS-свойство grid-column задаёт размер и положение элемента, находящегося внутри грид-колонки, путём размещения его по грид-линии, расширяя его при необходимости, тем самым определяя начальную и конечную границу грид-области, в пределах которой он должен находиться.

Интерактивный пример

Связанные свойства

Это свойство является сокращением для следующих свойств CSS:

Syntax

css
/* Ключевые слова */
grid-column: auto;
grid-column: auto / auto;

/* Значения с <custom-ident> */
grid-column: somegridarea;
grid-column: somegridarea / someothergridarea;

/* Значения с <integer> и <custom-ident> */
grid-column: somegridarea 4;
grid-column: 4 somegridarea / 6;

/* Значения со span, <integer> и <custom-ident> */
grid-column: span 3;
grid-column: span somegridarea;
grid-column: 5 somegridarea span;
grid-column: span 3 / 6;
grid-column: span somegridarea / span someothergridarea;
grid-column: 5 somegridarea span / 2 span;

/* Глобальные значения */
grid-column: inherit;
grid-column: initial;
grid-column: revert;
grid-column: revert-layer;
grid-column: unset;

Это свойство может принимать одно или два значения <grid-line>.

Если указаны два значения <grid-line>, они разделяются символом "/". В этом случае до слеша указывается значение для grid-column-start, а после слеша — значение для grid-column-end.

Само значение <grid-line> может быть определено следующим образом:

  • ключевым словом auto;
  • значением <custom-ident>;
  • значением <integer>;
  • <custom-ident> и <integer>, разделённых пробелом;
  • ключевым словом span вместе с <custom-ident> или <integer>.

Значения

auto

Ключевое слово, указывающее, что свойство ничего не делает для размещения элементов, подразумевается автоматическое размещение элемента и занимаемых им колонок, по умолчанию 1.

<custom-ident>

Если существует грид-линия с именем в формате <custom-ident>-start/<custom-ident>-end, элемент будет расположен с начала этой линии.

Примечание: Именованные грид-области автоматически создают имена линий в соответствии с показанным выше форматом, поэтому grid-column: foo; выберет начало/конец этой именованной грид-области (в случае если явно не указана другая линия с именами foo-start/foo-end).

Если такой грид-линии нет, то этот значение неявно преобразуется в <custom-ident> с числом 1.

<integer> && <custom-ident>?

Размещает грид-элемент на грид-линии, заданной числом <integer>. Если указано отрицательное число, отсчёт начинается в обратном порядке, начиная с конца грид-раскладки.

Если в значении задано имя <custom-ident>, то будут учитываться линии только с этим именем. Если линий с таким именем не хватает, тогда для поиска нужной позиции будут учитываться неявные грид-линии. То есть эти линии будут учитываться так, как если бы у них было задано указанное имя.

Целое (<integer>) значение 0 считается некорректным.

span && [ <integer> || <custom-ident> ]

Размещает грид-элемент таким образом, что он будет расширен на указанное число ячеек.

Если в значении задано имя <custom-ident>, то будут учитываться линии только с этим именем. Если линий с таким именем не хватает, тогда для выбора нужного количества ячеек будут учитываться неявно заданные грид-линии. То есть эти линии будут учитываться так, как если бы у них было задано указанное имя.

Если число <integer> не было указано, по умолчанию будет 1. Ноль и отрицательные числа считаются недопустимыми.

Формальное определение

Начальное значениекак и у каждого из подсвойств этого свойства:
Применяется кэлементы сетки и абсолютно-позиционированные блоки, находящиеся в сеточном контейнере
Наследуетсянет
Обработка значениякак и у каждого из подсвойств этого свойства:
Animation typediscrete

Формальный синтаксис

grid-column = 
  <grid-line> [ / <grid-line> ]?  

<grid-line> = 
  auto                                                |
  <custom-ident>                                      |
  [ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ]  |
  [ span && [ <integer [1,∞]> || <custom-ident> ] ]

Примеры

Грид-колонки с указанием размера и положением

HTML

html
<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
</div>

CSS

css
#grid {
  display: grid;
  height: 100px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 100px;
}

#item1 {
  background-color: lime;
}

#item2 {
  background-color: yellow;
  grid-column: 2 / 4;
}

#item3 {
  background-color: blue;
  grid-column: span 2 / 7;
}

Результат

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

Specification
CSS Grid Layout Module Level 2
# placement-shorthands

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также