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


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

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

Властивість `grid-area`

Цими властивостями ми визначаємо область, в яку буде поміщений елемент. Вони дозволяють вказати, де рядок починається на сітці та скільки клітинок він охоплює. Для цього використовуються номери ліній. Початкове значення цих властивостей - 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:

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

Синтаксис

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

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

<name>

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

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

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

Значення без задання: auto
Наслідує: Ні
Анімується: Так
JavaScript синтаксис: object.style.gridArea

Переглядачі

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

57.0

Не підтримується

52.0

10.1

44.0

16.0

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

57.0

52.0

10.3


Мобільних переглядачів ще не додано.

Приклади


Динамічний приклад роботи властивості

Універсальна властивість

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

Синтаксис

.box {


  grid-area: 1 / 2/ 1 / 6;


}

Синтаксис

.box {


  grid-area: header;


}

Додаткові посилання