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 July 2020.

* Learn more
* See full compatibility
* Report feedback
Сокращённое CSS-свойство **`grid-column`** задаёт размер и положение элемента, находящегося внутри грид-колонки, путём размещения его по грид-линии, расширяя его при необходимости, тем самым определяя начальную и конечную границу грид-области (en-US), в пределах которой он должен находиться.

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

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

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

* `grid-column-end` (en-US)
* `grid-column-start` (en-US)
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` (en-US): `auto`
* `grid-column-end` (en-US): `auto`
 |
| Применяется к | элементы сетки и абсолютно-позиционированные блоки, находящиеся в сеточном контейнере |
| Наследуется | нет |
| Обработка значения | как и у каждого из подсвойств этого свойства:* `grid-column-start` (en-US): как указано
* `grid-column-end` (en-US): как указано
 |
| Animation type | discrete |

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

grid-column =   
  <grid-line> [ (en-US) / <grid-line> ] (en-US)? (en-US)    
  
<grid-line> =   
  auto                                                | (en-US)  
  <custom-ident>                                      | (en-US)  
  [ (en-US) [ (en-US) <integer [-∞,-1]> | (en-US) <integer [1,∞]> ] (en-US) && (en-US) <custom-ident>? (en-US) ] (en-US)  | (en-US)  
  [ (en-US) span && (en-US) [ (en-US) <integer [1,∞]> || (en-US) <custom-ident> ] (en-US) ] (en-US)     
  
```

Примеры
-------

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

#### 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 with JavaScript enabled. Enable JavaScript to view data.

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

* Связанные CSS-свойства: `grid-row` (en-US), `grid-row-start`, `grid-row-end` (en-US), `grid-column-start` (en-US), `grid-column-end` (en-US)
* Руководство по грид-раскладке: *Line-based placement with CSS Grid*
* Обучающее видео: *Line-based placement*