Question

在CSS网格中使用grid-template-area时，我想要一个跨整个宽度的标题。是的，我可以使用repeat（12，1fr）定义template-grid-columns，但是我一直在寻找一种使用它的方法，而不必将列名写入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”字样的十二次书写，有没有一种方法可以使用重复，以便我可以做repeat(12,article-hero)而不是将其写出十二遍？

Answer 1

在使用grid-template-areas时，您必须麻烦写出网格区域-您在这里没有 repeat （实际上，与ASCII art相似）。

CollectionViewSource.GetDefaultView(ItemsCol).DeferRefresh();

.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>时需要注意的几点：

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

使用网格线定位项目

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

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;
}

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

1 个答案: