Перейти к содержанию

grid-area

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

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

Демо

Grid Layout

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/* 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;

Значения

Значение по-умолчанию:

  • grid-row-start: auto
  • grid-column-start: auto
  • grid-row-end: auto
  • grid-column-end: auto

Наследуется: нет

Применяется к элементам сетки

Анимируется: нет

Объектная модель: object.style.gridArea

Спецификации

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

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

Описание и примеры

1
2
3
4
5
<div id="grid">
    <div id="item1"></div>
    <div id="item2"></div>
    <div id="item3"></div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
#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

См. также

Комментарии