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

【问题标题】：Using repeat in grid-template-areas instead of having to repeat grid cell names在网格模板区域中使用重复，而不必重复网格单元名称
【发布时间】：2019-08-08 10:56:25
【问题描述】：

在 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 次？

【问题讨论】：

你可以使用 grid-template-columns: repeat(12, 1fr);网格模板行：重复（12，1fr）；
嘿。感谢您的回复。我需要它让重复也包含单元格的名称。例如。我想知道是否有短手重复将 article-hero 添加到所有 12 个单元格，以便我可以说 #article-hero { grid-area: article-hero; }
是的，你可以使用这个，grid-template-areas: "article-hero";网格模板列：重复（12，1fr）；
会试一试。如果我能把它分类就好了。

标签： html css css-grid

【解决方案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时需要注意的几点：

它们应该是矩形 - 参见示例here。
grid-template-areas 属性的每个字符串中的列数必须相等 - 否则它们将无效 - 请参阅示例 here。

使用网格线定位项目

您可以在此处使用 12 列网格（使用 grid-template-columns: repeat(12, 1fr)）和使用 grid-column 属性切换到 line-based-placements - 请参阅下面的演示：

.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>

【讨论】：