Использование повторения в областях сетки-шаблона вместо необходимости повторять имена ячеек сетки

Question

При использовании grid-template-area в CSS-сетке я хотел иметь заголовок, охватывающий всю ширину.Да, я могу определить template-grid-columns с repeat (12, 1fr), но я искал способ использовать его вместо того, чтобы писать имя столбца 12 раз.См. Ниже.

grid-template-areas: 
            "article-hero article-hero article-hero article-hero article-hero article-hero article-hero article-hero article-hero article-hero article-hero article-hero"
            "header header header header header header header header header header header header"
            "main main main main main main main main main aside aside aside"
            "footer footer footer footer footer footer footer footer footer footer footer footer";

В первой строке, в которой статья-герой написана двенадцать раз, есть ли способ использовать повтор, чтобы я мог сделать repeat(12,article-hero) вместо того, чтобы записать его 12 раз?

Answer 1

Когда вы используете grid-template-areas, вам нужно потрудиться, чтобы выписать областей сетки из - у вас нет повтора здесь (на самом деле это очень похоже на ASCII art).

.wrapper {
  display: grid;
  grid-template-areas: "article-hero article-hero article-hero article-hero article-hero article-hero article-hero article-hero article-hero article-hero article-hero article-hero"
      "header header header header header header header header header header header header" 
      "main main main main main main main main main aside aside aside"
      "footer footer footer footer footer footer footer footer footer footer footer footer";
  height: 100vh;
}

.wrapper>* {
  border: 1px solid cadetblue;
}

article {
  grid-area: article-hero;
}

header {
  grid-area: header;
}

main {
  grid-area: main;
}

footer {
  grid-area: footer;
}

aside {
  grid-area: aside;
}

<div class="wrapper">
  <article>hero</article>
  <header>header</header>
  <main>main</main>
  <aside>aside</aside>
  <footer>footer</footer>
</div>

При использовании grid-template-areas следует отметить несколько моментов:

1. Они должны быть прямоугольными - см. пример here.

2. Количество столбцов должно быть одинаковым в каждой строке вашего свойства grid-template-areas -иначе они будут недействительными - см. пример here.

---

Позиционные элементы с использованием линий сетки

Вы можете переключиться на line-based-placements здесь с сеткой из 12 столбцов (используя grid-template-columns: repeat(12, 1fr)) и используя свойство grid-column - см. Демонстрацию ниже:

.wrapper {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  height: 100vh;
}
.wrapper>* {
  border: 1px solid cadetblue;
  grid-column: span 12;
}
.wrapper main {
  grid-column: span 9;
}
.wrapper aside {
  grid-column: span 3;
}

<div class="wrapper">
  <article>hero</article>
  <header>header</header>
  <main>main</main>
  <aside>aside</aside>
  <footer>footer</footer>
</div>