css властивість grid-template-areas

Властивість grid-template-areas вказує назви сіткових областей.

Визначає шаблон сітки, на який можна буде посилатися з grid-area. Наприклад:

grid-template-areas:  "header header header"
                      "nav article ads"
                      "nav footer footer";

Порожні клітини

Ви можете вказати порожню клітинку, використовуючи символ (.), наприклад:

grid-template-areas: "a a"
                     ". b";

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

Іменовані лінії можуть спростити усвідомлення сітки, оскільки ви можете надати змістовні імена рядкам.

Названі рядки можуть бути явними або неявними:

• Явні іменовані рядки - це ті назви, які ви задаєте.
• Неявні названі рядки - це імена, які автоматично створюються властивості grid-template-areas. Ці названі рядки створюються з названих областей у шаблоні. Для кожної названої сіткової області з ім'ям foo (наприклад) створюються чотири неявно названих рядки. Дві імені, що називаються foo-start, є початковими рядками і стовпчиками в сітці та два імені foo-end - кінцевими.

правити

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

Синтаксис

grid-template-areas: none | <string>+

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

<grid-area-name>

ім'я області визначеної у grid-area

автор: Svitlana

правити

.

пуста комірка сітки

автор: Svitlana

правити

none

відсутні сіткові області

автор: Svitlana

правити

Переглядачі

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

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

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

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

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

Приклади

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

<div class="box">
    <header>header</header>
    <article>article</article>
    <aside>content</aside>
</div>

.box {
    display: grid;
    grid-template-areas:
        "header  header"
        "article content";
    gap: 4px;
}

.box > * {
    background: #eee;
    padding: 8px;
    margin: 0;
}

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

article { grid-area: article; }
aside   { grid-area: content; }