在网格模板区域中使用重复，而不必重复网格单元名称

Question

在 CSS 网格中使用 grid-template-areas 时，我想要一个跨越整个宽度的标题。是的，我可以使用 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";

第一行有 'article-hero 写了 12 次，有没有办法使用重复，这样我就可以做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>