css властивість grid-area

Властивість grid-area - це універсальна властивість, для скороченого запису:

• grid-row-start (задає першу горизонтальну лінію для елемента)
• grid-column-start (задає першу вертикальну лінію для елемента)*
• grid-row-end (задає останню горизонтальну лінію для елемента)
• grid-column-end (задає останню вертикальну лінію для елемента)

Цими властивостями ми визначаємо область, в яку буде поміщений елемент. Вони дозволяють вказати, де рядок починається на сітці та скільки клітинок він охоплює. Для цього використовуються номери ліній. Початкове значення цих властивостей - auto, завдяки чому елементи можуть розміщуватися автоматично, відшукуючи у сітці порожні клітинки.

За допомогою grid-area, ми можемо записати всі ці чотири властивості одночасно. Наприклад:

.box {
  grid-column-start: 2; 
  grid-column-end: 4;
  grid-row-start: 2; 
  grid-row-end 4;
}

А можна записати так:

.box {
  grid-area: 2 / 2 / 4 / 4;
}

Записуємо саме в цій послідовності: grid-row-start / grid-column-start / grid-row-end / grid-column-end. Риска (/) відділяє значення для кожної під-властивості.

Також властивість grid-area можна використовувати, щоб дати елементу ім'я, щоб на нього міг посилатися шаблон, створений за допомогою властивості grid-template-areas:

/* тут визначаємо імена */
grid-template-areas: 
  "a b c"
  "d e f"
  "g h i";
    
/* посилаємося на імена з сітки */
.box .item:first-child {
  grid-area: e / e / i / i;
}

Неявні іменовані лінії

Ви також можете посилатися на будь-які неявні (і явні) названі лінії, які були визначені в сітці.

Неявні названі рядки створюються автоматично, коли ви створюєте іменовану сітку. Тому, коли ви створюєте імена для елементів сітки (як у попередньому прикладі), за цим сценарієм створюється цілий набір імпліцитних (невиражених) названих рядків.

Для кожної названої сіткової області з ім'ям, наприклад foo створюються чотири імпліцитно названі рядки. Два імені, що називаються foo-start, називаються рядками початку рядка і стовпця та двома імені foo-end називаються рядками кінці рядка і стовпця.

Отже, ми можемо взяти приклад вище і додати -start для обох значень e і -end до обох i значень, і матимемо імпліцитні названі рядки:

/* тут визначаємо імена */
  grid-template-areas: 
    "a b c"
    "d e f"
    "g h i";
    
/* посилаємося на неявні іменовані рядки */
.box .item:first-child {
  grid-area: e-start / e-start / i-end / i-end;
}

Отже, ми фактично не визначали e-start або i-end в будь-якому місці коду. Вони були автоматично створені з наших названих областей сітки. Якщо б ми назвали ці області, скажімо, one і two, наші неявні названі рядки будуть називатися one-start і two-end.

Явні іменовані рядки

CSS також дозволяє вказати власні імена для ліній сітки. Вони називаються явними названими рядками. Ви можете створювати ці імена, коли ви визначаєте клітинки, а потім звертаєтесь до них, як з неявними названими рядками:

/* визначаємо рідки й імена ліній */
grid-template-columns: 1fr [col2-start] 1fr 1fr [col3-end];
grid-template-rows: 1fr [row2-start] 1fr 1fr [row3-end] 1fr;

/* посилаємося на іменовані рядки */
#grid >` div:first-child {
  grid-area: row2-start / col2-start / row3-end / col3-end;
}

Ключове слово span

Ключове слово span може використовуватися для того, щоб елемент сітки міг послідовно поєднувати кілька клітин.

Ось результат використання span:

правити

+ додати пораду чи нотатку

Синтаксис

grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;

Властивість grid-area може отримувати 2 значень:

<name>

Ім'я для елемента сітки.

автор: Svitlana

правити

<row-start> / <column-start> / <row-end> / <column-end>

Значення для під-властивостей grid-row-start, grid-column-start, grid-row-end, grid-column-end відповідно.

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
grid-area	57.0	52.0	10.1	44.0	16.0	Не підтримується

Підтримка: мобільні переглядачі

Переглядач
grid-area	57.0	52.0	10.3

Приклади

+ запропонувати свій приклад у пісочниці

<div class="grid">
    <div class="box">1 / 2 / 2 / 6</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

.grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
}

.grid div {
    background: #eee;
    padding: 8px;
}

.box {
    grid-area: 1 / 2 / 2 / 6;
    background: #0172ad;
    color: #fff;
}

<div class="layout">
    <div class="box">header</div>
    <div class="nav">nav</div>
    <div class="main">main</div>
</div>

.layout {
    display: grid;
    grid-template-areas:
        "header header"
        "nav    main";
    gap: 4px;
}

.layout div {
    background: #eee;
    padding: 8px;
}

.box {
    grid-area: header;
    background: #0172ad;
    color: #fff;
}

.nav  { grid-area: nav; }
.main { grid-area: main; }