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

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
grid-column

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

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