grid-template-areas

描述

适用于：网格容器

CSS属性 grid-template-areas 是网格区域 grid areas 在CSS中的特定命名。在网格中创建区域并为其命名。

我们在定义网格区域的时候，只能定义矩形，而不能定义T型或L型区域。在网格元素中自定义网格区域的关键字后，然后在 grid-template-areas 属性中设置分配这些自定义关键定，网格元素就可以根据模板中定义的区域进行分配了。

取值

• none

  不定义任何网格模板区域

• 模板字符串 <string>+

  每一行字符串都是用空格隔开的自定义字符表示，有多少行就表示定义了多少个网格行，一行有多少个自定义字符，就表示有多少列。

语法

/* 关键字取值 */
grid-template-areas: none;

/* 模板字符串 */
grid-template-areas: "a b";
grid-template-areas: "a b b"
                "a c d";

/* 全局数值 */
grid-template-areas: inherit;
grid-template-areas: initial;
grid-template-areas: unset;

示例

在下面的例子中，有一个网格容器包含两个网格项目，我用 grid-area 属性命名它们，然后用 grid-template-areas 把它们放在网格上。这将创建两个网格区域，一个覆盖四个网格单元格，另外一个覆盖两个。

<div class="wrapper">
   <div class="item1">Item</div>
   <div class="item2">Item</div>
</div>

.wrapper {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: 100px 100px;
    grid-template-areas:
            "a a b"
            "a a b";
}
.item1 {
    grid-area: a;
}
.item2 {
    grid-area: b;
}