有没有一种较短的方法来定义网格模板区域？

Question

定义区域使设置CSS网格变得容易得多。一个为将在网格中的每个项目定义一个grid-area，然后一个人将该区域添加到grid-template-areas。当一个网格的设置非常复杂时，需要将所有网格区域都放在grid-template-areas中，如下所示：

grid-template-areas: 
    "header header header header header header"
    "aside aside content content content content"
    "box1 box1 box1 box2 box3 box3"
    "box4 box5 box5 box6 box6 box6";

这可能是一个完全无知的问题，但是有没有办法使用类似repeat(6, header)的东西，或者这样会缩短定义这样的复杂区域结构时的方式？在字符串中，这是行不通的，因为grid-template-areas期望使用一组字符串。

我知道人们可以用grid-template-columns完成类似的行为，如图here所示，其中可以定义一些区域，然后以匹配的分数单位（fr）重复这些区域，但是像这样的结构不适用于我的情况，因为此处的网格太复杂而无法应用于它，是吗？

在SASS中，一个人可以循环遍历一个变量，但是我不认为这是一种方法，对吗？

Answer 1

使用纯CSS，答案是否定的。您需要全部布置。

grid-template-areas属性旨在提供网格的可视结构。这就是为什么它存在。任何捷径都会违背其目的。

  

§ 7.3. Named Areas: the grid-template-areas property

     

grid-template-areas属性的语法提供了一个   可视化网格结构，进行整体布局   网格容器更容易理解。

     

§ 7.4. Explicit Grid Shorthand: the grid-template property property

     

请注意，在这些曲目列表中不允许使用repeat()函数，因为曲目旨在在视觉上与“ ASCII艺术”中的行/列一一对应。

这是我的一个网站中的grid-template-areas：

Answer 2

一种优化的想法是定义一个范围，而不是：

header header header header header header 

你做

header-s . . . . header-e

您考虑使用grid-column:header-s/header-e。您至少会减少冗余。

.box  {
 display:grid;
 grid-gap:5px;
 border:1px solid;
  grid-template-areas: 
    "header-s . . . . header-e"
    "aside aside content-s . . content-e"
    "box1-s . box1-e box2 box3 box3"
    "box4 box5 box5 box6-s . box6-e";
 }
 .box > div:first-child {
   height:50px;
   background:red;
   grid-column:header-s/header-e;
   grid-row:1;
 }
 .box > div:nth-child(2) {
   height:50px;
   background:green;
   grid-column:box1-s/box1-e
 }
 
 .box > div:nth-child(3) {
   height:50px;
   background:blue;
   grid-area:box2
 }
  .box > div:nth-child(4) {
   height:50px;
   background:orange;
   grid-area:box3
 }
   .box > div:nth-child(5) {
   height:50px;
   background:purple;
   grid-column:box6-s/box6-e;
   grid-row:4;
 }

<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>