网格区域在 CSS Grid 中没有正确布局

Question

我想使用 CSS 网格系统制作我的网站，但它似乎无法正常工作。这是我的代码：

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "logo faq" "about-us";
}

.logo {
  background-color: blue;
  grid-area: logo;
}

.faq {
  background-color: red;
  grid-area: faq;
}

.aboutUs {
  background-color: cyan;
  grid-area: about-us;
}

<div class="grid">
  <div class="logo">
    LOGO
  </div>
  <div class="faq">
    FAq
  </div>
  <div class="aboutUs">
    About-us
  </div>
</div>

Answer 1

使用grid-template-areas 属性时，字符串值必须具有相同的列数。

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "logo faq" "about-us about-us";
}

.logo {
  background-color: blue;
  grid-area: logo;
}

.faq {
  background-color: red;
  grid-area: faq;
}

.aboutUs {
  background-color: cyan;
  grid-area: about-us;
}

<div class="grid">
  <div class="logo">
    LOGO
  </div>
  <div class="faq">
    FAq
  </div>
  <div class="aboutUs">
    About-us
  </div>
</div>

您可以使用句点或连续的句点来表示一个空单元格 (spec reference)。

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "logo faq" " ... about-us";
}

.logo {
  background-color: blue;
  grid-area: logo;
}

.faq {
  background-color: red;
  grid-area: faq;
}

.aboutUs {
  background-color: cyan;
  grid-area: about-us;
}

<div class="grid">
  <div class="logo">
    LOGO
  </div>
  <div class="faq">
    FAq
  </div>
  <div class="aboutUs">
    About-us
  </div>
</div>

来自网格规范：

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

所有字符串的列数必须相同，否则声明无效。

如果一个命名的网格区域跨越多个网格单元，但这些单元没有形成一个填充的矩形，则声明无效。

此模块的未来版本可能允许使用非矩形或断开连接的区域。

注意：如规范中所述，除了相同数量的列外，网格区域还必须是矩形 (see this post for more details)。

Answer 2

如果这样：

是想要的结果，那么你只是犯了一个小错误。

您已在此处将网格设置为 2 x 2 正方形：

  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;

但你并没有填满所有的空间。

  grid-template-areas: "logo faq", "about-us";

那行代码是说“在顶部的两个方块中分别放置徽标和常见问题解答。在底部的两行中放置 about-us”，这会导致错误。如果你想让一个grid-area 填满整个空间，那么你需要声明它两次。因此上面的行变成：

  grid-template-areas: "logo faq", "about-us about-us";

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "logo faq", "about-us";
}

.logo {
  background-color: blue;
  grid-area: logo;
}

.faq {
  background-color: red;
  grid-area: faq;
}

.aboutUs {
  background-color: cyan;
  grid-area: about-us;
}

<div class="grid">
  <div class="logo">
    LOGO
  </div>
  <div class="faq">
    FAq
  </div>
  <div class="aboutUs">
    About-us
  </div>
</div>