CSS grid-template-areas 属性

CSS grid-template-areas 是 CSS 网格布局（CSS grid layout）的重要属性之一，它可以用来定义网格容器中的区域和项目。

语法

grid-template-areas: none | <string>+

值

• none：默认值，表示不使用 grid-template-areas。
• <string>+：表示一个或多个字符序列（字符串），可以为空格分隔的项目名称，以及句点表示空格的字符。

工作原理

网格容器中的每个项目都可以被分配到命名区域（named area）中，一个命名区域可以由一个或多个单元格（grid cell）组成，单元格是由行和列交叉形成的。网格容器通过 grid-template-areas 属性定义这些命名区域。

grid-template-areas 属性是一个字符串列表，每个字符串代表一个网格容器中的行，通过双引号或单引号引用，也可以用句点表示空格。这些字符串可以放在一起、甚至可以跨越多行，因为这个属性的内容不会影响到网格布局的排列。

<div class="container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
</div>

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 150px;
  grid-template-areas:
    "item1 item2 item3"
    "item4 item5 item6";
}

.item1 {
  grid-area: item1;
}
.item2 {
  grid-area: item2;
}
.item3 {
  grid-area: item3;
}
.item4 {
  grid-area: item4;
}
.item5 {
  grid-area: item5;
}
.item6 {
  grid-area: item6;
}

上述代码中，通过 grid-template-areas 属性将一个网格容器划分成两行三列的命名区域。如下图所示：

条件限制

• grid-template-areas 属性只能在网格容器上使用。
• 命名区域必须基于网格容器的行和列定义而来。
• 命名区域必须是矩形或 L 形的。
• 命名区域必须相互不重叠或相切，否则布局将无法正常工作。
• 特定的命名区域只能由一个项目占用。

总结

通过 CSS grid-template-areas 属性，可以简化布局中各个网格容器的位置，满足布局尺寸和样式的需求，可以更便捷地实现网格布局，提高页面的开发效率和可维护性。