Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

CSS свойство grid-area - это сокращенная форма записи для свойств grid-row-start, grid-column-start, grid-row-end и grid-column-end. Определяет размер и местоположение грид-элемента в пределах grid row. Задает края грид-области грид-элемента.

/* Ключевые слова в качестве значений */
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.

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

Синтаксис

Значения

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 nth 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-line> [ / <grid-line> ]{0,3}

где
<grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ]

Example

HTML content

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

CSS content

#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 Status Comment
CSS Grid Layout
Определение 'grid-area' в этой спецификации.
Кандидат в рекомендации Initial definition

Browser compatibility

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidEdge MobileFirefox для AndroidOpera для AndroidiOS SafariSamsung Internet
Базовая поддержкаChrome Полная поддержка 57
Полная поддержка 57
Полная поддержка 29
Отключено
Отключено From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Полная поддержка 16Firefox Полная поддержка 52
Полная поддержка 52
Полная поддержка 40
Отключено
Отключено From version 40: this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Нет поддержки НетOpera Полная поддержка 44
Полная поддержка 44
Полная поддержка 28
Отключено
Отключено From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari Полная поддержка 10.1WebView Android Полная поддержка 57Chrome Android Полная поддержка 57
Полная поддержка 57
Полная поддержка 29
Отключено
Отключено From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Mobile Полная поддержка 16Firefox Android Полная поддержка 52
Полная поддержка 52
Полная поддержка 40
Отключено
Отключено From version 40: this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Полная поддержка 44Safari iOS Полная поддержка 10.3Samsung Internet Android Полная поддержка 6.0

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Пользователь должен сам включить эту возможность.
Пользователь должен сам включить эту возможность.

See also

Метки документа и участники

Внесли вклад в эту страницу: coshturnina
Обновлялась последний раз: coshturnina,