是否有更短的方法来定义网格模板区域？

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

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

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>

Answer 2

使用纯 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：