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 октябрь 2017 г..

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

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

grid-column: 1;

grid-column: 1 / 3;

grid-column: 2 / -1;

grid-column: 1 / span 2;

<section>  <div>    <div>One</div>    <div>Two</div>    <div>Three</div>  </div></section>

.example-container {  border: 1px solid #c5c5c5;  display: grid;  grid-template-columns: 1fr 1.5fr 1fr;  grid-template-rows: repeat(3, minmax(40px, auto));  grid-gap: 10px;  width: 200px;}.example-container > div {  background-color: rgba(0, 0, 255, 0.2);  border: 3px solid blue;}#example-element {  background-color: rgba(255, 0, 200, 0.2);  border: 3px solid rebeccapurple;}

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

Это свойство является сокращением для следующих свойств 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. Ноль и отрицательные числа считаются недопустимыми.

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

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

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

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

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

<integer> =
<number-token>

Примеры

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

HTML

html

<div>  <div></div>  <div></div>  <div></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;}