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

правити

Переглядачі

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

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

Переглядач
	57	52	10.1	44	16	—

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

Переглядач
	57	57	52	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; }

<header id="pageHeader">Header</header>
<article id="mainArticle">Article</article>
<nav id="mainNav">Nav</nav>
<div id="siteAds">Sidebar</div>
<footer id="pageFooter">Footer</footer>

body {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav article ads"
    "nav footer footer";
  grid-template-rows: 1fr 4fr 1fr;
  grid-auto-columns: 1fr 4fr 1fr;
  grid-gap: 5px;
  height: 85vh;
}

header, footer, article, nav, div {
  background-color: tomato;
  color: white;
  font-size: 1.75em;
  text-align: center;
  font-family: monospace;
  padding: 16px;
}

#pageHeader {
  grid-area: header;
}

#pageFooter {
  grid-area: footer;
}

#mainArticle {
  grid-area: article;
}

#mainNav {
  grid-area: nav;
}

#siteAds {
  grid-area: ads;
}

<div class="page">
  <header>header</header>
  <nav>nav</nav>
  <main>main</main>
  <footer>footer</footer>
</div>

.page {
    display: grid;
    grid-template-areas:
        "header header"
        "nav    main"
        "footer footer";
    grid-template-columns: 140px 1fr;
    grid-template-rows: auto 160px auto;
    gap: 10px;
    font: 15px sans-serif;
}
header { grid-area: header; background: #4a6fa5; color: #fff; }
nav    { grid-area: nav;    background: #ffe9b0; }
main   { grid-area: main;   background: #e8eef7; }
footer { grid-area: footer; background: #d2451e; color: #fff; }

.page > * {
    padding: 14px;
    text-align: center;
}