grid-area

Если указано четыре <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.

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

• grid-row-start
• grid-column-start
• grid-row-end
• grid-column-end

auto

Это ключевое слово, указывающее, что свойство ничего не вносит в расположение элемента сетки, указывая автоматическое размещение или стандартный размах 1.

<custom-ident>

Если есть именованная линия с именем <custom-ident>-start или <custom-ident>-end, она вносит первую такую линию в расположение элемента сетки.

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

В противном случае, это рассматривается так, как будто указано целое число 1 вместе с <custom-ident>.

<integer> && <custom-ident>?

Вносит n-ю линию сетки в расположение элемента сетки. Если задано отрицательное целое число, оно вместо этого считает в обратном порядке, начиная с конечного края явной сетки.

Если имя задано как <custom-ident>, учитываются только линии с этим именем. Если таких линий недостаточно, все неявные линии сетки предполагаются имеющими это имя для определения этого положения.

Значение <integer> 0 недопустимо.

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

Вносит размах сетки в размещение элемента сетки так, чтобы соответствующий край области сетки элемента сетки находился на расстоянии n линий от противоположного края.

Если имя задано как <custom-ident>, учитываются только линии с этим именем. Если таких линий недостаточно, все неявные линии сетки на стороне явной сетки, соответствующей направлению поиска, предполагаются имеющими это имя для подсчёта этого размаха.

Если <integer> опущено, по умолчанию используется 1. Отрицательные целые числа или 0 недопустимы.

grid-area = 
  <grid-line> [ / <grid-line> ]{0,3}  

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

HTML

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

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

Результат

• grid-row
• grid-row-start
• grid-row-end
• grid-column
• grid-column-start
• grid-column-end
• grid-template-areas
• Шаблоны областей сетки
• Видео: Шаблоны областей сетки