grid-area CSS

Become a Patron!

Свойство grid-area даёт название элементу чтобы можно было ссылаться на него с помощью шаблона созданного через grid-template-areas свойство.

Свойство grid-area является сокращенным свойством для grid-row-start, grid-column-start, grid-row-end и grid-column-end, определяя размер и расположение элемента сетки.

Значение по умолчанию:
  • grid-row-start: auto
  • grid-column-start: auto
  • grid-row-end: auto
  • grid-column-end: auto
Наследуется:
Нет
Применяется:

к элементам сетки

Анимируется:
Нет
Спецификации:
Поддержка браузерами:

Can I Use css-grid? Data on support for the css-grid feature across the major browsers from caniuse.com.

Синтаксис

/* Keyword values */
grid-area: auto;
grid-area: auto / auto;
grid-area: auto / auto / auto;
grid-area: auto / auto / auto / auto;

/* <custom-ident> values */
grid-area: some-grid-area;
grid-area: some-grid-area / another-grid-area;

/* <integer> && <custom-ident>? values */
grid-area: some-grid-area 4;
grid-area: some-grid-area 4 / 2 another-grid-area;

/* span && [ <integer> || <custom-ident> ] values */
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;

Значения

Поддержка браузерами

  • Реализована за флагом экспериментальной веб-платформы в флагах chrome:// с Chrome 29.0
  • Реализовано за флагом layout.css.grid.enabled с Gecko 40.0 (Firefox 40.0 / Thunderbird 40.0 / SeaMonkey 2.37), по умолчанию — false. Начиная с Gecko 52.0 (Firefox 52.0 / Thunderbird 52.0 / SeaMonkey 2.49) он включен по умолчанию.
  • Internet Explorer и Edge используют более старую версию спецификации, которая не определяет это свойство.
  • Реализовано за флагом Enable Experion Web Platform в флагах chrome://, начиная с Opera 28.0

Примеры

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-area
Пример использования свойства grid-area