grid-area
=========

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-area` - это сокращённая форма записи для свойств `grid-row-start`, `grid-column-start` (en-US), `grid-row-end` (en-US) и `grid-column-end` (en-US). Определяет размер и местоположение грид-элемента в пределах grid row (en-US). Задаёт края грид-области (en-US) грид-элемента.


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

/\* <custom-ident> значения \*/
grid-area: some-grid-area;
grid-area: some-grid-area / another-grid-area;

/\* <integer> && <custom-ident>? значения \*/
grid-area: some-grid-area 4;
grid-area: some-grid-area 4 / 2 another-grid-area;

/\* span && [ <integer> || <custom-ident> ] значения \*/
grid-area: span 3;
grid-area: span 3 / span some-grid-area;
grid-area: 2 span / another-grid-area span;

/\* Global values \*/
grid-area: inherit;
grid-area: initial;
grid-area: unset;
```


Если заданы четыре значения `<grid-line>` , то первое значение определяет `grid-row-start` , второе значение - `grid-column-start` , третье значение - `grid-row-end` и четвёртое значение - `grid-column-end`.

Если `grid-column-end` опущено, а `grid-column-start` в значении `<custom-ident>`, `grid-column-end` устанавливается в это значение `<custom-ident>`; иначе оно устанавливается в значение `auto`.

Когда `grid-row-end` опущено, а `grid-row-start` в значении `<custom-ident>`, то `grid-row-end` устанавливается в это значение `<custom-ident>`; иначе оно устанавливается в значение `auto`.

Когда `grid-column-start` опущено, а `grid-row-start` в значении `<custom-ident>`, все четыре свойства длинной записи устанавливаются в это значение, иначе они устанавливаются в значение `auto`.

Свойство grid-area также может быть установлено в значение `<custom-ident>` , которое действует, как имя области. В дальнейшем разместить область в гриде по имени можно с помощью свойства `grid-template-areas`.

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

Синтаксис
---------

### Значения

`auto`

- ключевое слово, говорящее о том, что свойство не вносит никаких изменений в размещение грид-элемента. На элемент действует авторазмещение или размер элемента по умолчанию `1`. *(то есть, элемент занимает одну ячейку грид-сетки в заданном направлении)*

`<custom-ident>`

если есть именованная линия с именем '`<custom-ident>-start`'/'`<custom-ident>-end`', то грид-элемент привязывается к первой из таких линий.

**Примечание:** Именованные грид-области автоматически генерируют неявные именованные линии с именами подобного формата, поэтому запись `grid-area: foo;` выберет начальный/конечный край этой именованной грид-области (если, конечно, другая линия с именем `foo-start`/`foo-end` не была явно определена раньше).В противном случае, значение расценивается, как если бы число `1` было задано вместе с `<custom-ident>`.

`<integer> && <custom-ident>?`

Contributes the *n*th grid line to the grid item's placement. If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid.If a name is given as a `<custom-ident>`, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this position.An `<integer>` value of `0` is invalid.

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

Contributes a grid span to the grid item's placement such that the corresponding edge of the grid item's grid area is *n* lines from the opposite edge.If a name is given as a `<custom-ident>`, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines on the side of the explicit grid corresponding to the search direction are assumed to have that name for the purpose of counting this span.If the `<integer>` is omitted, it defaults to `1`. Negative integers or 0 are invalid.

### Formal syntax
```

grid-area =   
  <grid-line> [ (en-US) / <grid-line> ] (en-US){0,3} (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)     
  
```

Example
-------

### HTML content


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

### CSS content


```css
#grid {
  display: grid;
  height: 100px;
  grid-template: repeat(4, 1fr) / 50px 100px;
}

#item1 {
  background-color: lime;
  grid-area: 2 / 2 / auto / span 3;
}

#item2 {
  background-color: yellow;
}

#item3 {
  background-color: blue;
}
```

Specifications
--------------

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # propdef-grid-area |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Related CSS properties: `grid-row` (en-US), `grid-row-start`, `grid-row-end` (en-US), `grid-column`, `grid-column-start` (en-US), `grid-column-end` (en-US), `grid-template-areas`
* Grid Layout Guide: *Grid template areas*
* Video tutorial: *Grid Template Areas*