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>Ім'я для елемента сітки.
<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;
}