Свойство grid-area
  1. Главная
  2. CSS
  3. Свойство grid-area
Создание сайта на CMS WordPress: обучение и хостинг
← Перейти к списку свойств

СВОЙСТВО GRID-AREA

Свойство grid-area указывает размер и расположение элемента в сетке и включает в себя следующие свойства:

Поддержка браузеров

16+

Синтаксис

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname

Значения свойства

Значение Описание
grid-row-start Задает начальную позицию элемента сетки в строке.
grid-column-start Задает начальную позицию элемента сетки в столбце.
grid-row-end Указывает конечную позицию элемента в строке.
grid-column-end Указывает конечную позицию элемента в столбце.
initial Устанавливает значение по умолчанию.
inherit Унаследует значение свойства от родительского элемента.

Песочница

Код в песочнице можно редактировать и видеть результат в реальном времени:

<div class="grid">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
HTML 
.grid {
    display: grid;
    grid: 60px 80px 100px / auto auto auto;
    grid-gap: 15px;
    background-color: #f1f1f1;
}

.item:nth-child(1) {
    background: yellow;
    grid-area: 1 / 2 / span 2 / span 2;
}
.item:nth-child(2) {background: blue}
.item:nth-child(3) {background: beige}
.item:nth-child(4) {background: yellow}
.item:nth-child(5) {background: blue}
.item:nth-child(6) {background: beige}
.item:nth-child(7) {background: yellow}
.item:nth-child(8) {background: blue}
.item:nth-child(9) {background: beige}
CSS
← Перейти к списку свойств