网格区域在CSS网格中的布局不正确

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 {&nbsp; display: grid;&nbsp; grid-template-columns: 1fr 1fr;&nbsp; grid-template-rows: 1fr 1fr;&nbsp; grid-template-areas: "logo faq" "about-us about-us";}.logo {&nbsp; background-color: blue;&nbsp; grid-area: logo;}.faq {&nbsp; background-color: red;&nbsp; grid-area: faq;}.aboutUs {&nbsp; background-color: cyan;&nbsp; grid-area: about-us;}<div class="grid">&nbsp; <div class="logo">&nbsp; &nbsp; LOGO&nbsp; </div>&nbsp; <div class="faq">&nbsp; &nbsp; FAq&nbsp; </div>&nbsp; <div class="aboutUs">&nbsp; &nbsp; About-us&nbsp; </div></div>您可以使用一个句点或不间断的句点行来表示一个空单元格（规范参考）。.grid {&nbsp; display: grid;&nbsp; grid-template-columns: 1fr 1fr;&nbsp; grid-template-rows: 1fr 1fr;&nbsp; grid-template-areas: "logo faq" " ... about-us";}.logo {&nbsp; background-color: blue;&nbsp; grid-area: logo;}.faq {&nbsp; background-color: red;&nbsp; grid-area: faq;}.aboutUs {&nbsp; background-color: cyan;&nbsp; grid-area: about-us;}<div class="grid">&nbsp; <div class="logo">&nbsp; &nbsp; LOGO&nbsp; </div>&nbsp; <div class="faq">&nbsp; &nbsp; FAq&nbsp; </div>&nbsp; <div class="aboutUs">&nbsp; &nbsp; About-us&nbsp; </div></div>从网格规范：7.3。命名区域：the grid-template-areas 属性所有字符串的列数必须相同，否则声明无效。如果命名的网格区域跨越多个网格单元，但是这些单元不形成单个填充矩形，则声明无效。在此模块的将来版本中，可能会允许非矩形或不连续区域。注意：如规范中所述，除了相等数量的列之外，网格区域还必须是矩形的（有关更多详细信息，请参见此帖子）。

Answer 2

如果这：是理想的结果，那么您只犯了一个小错误。您已在此处将网格设置为2 x 2正方形：&nbsp; grid-template-columns: 1fr 1fr;&nbsp; grid-template-rows: 1fr 1fr;但是您并没有填补所有空间。&nbsp; grid-template-areas: "logo faq", "about-us";该行代码说“在顶部的两个方框中分别放置徽标和常见问题。在底部的两行中放置大约”，这将导致错误。如果要grid-area填充整个空间，则需要声明两次。因此，以上行变为：&nbsp; grid-template-areas: "logo faq", "about-us about-us";.grid {&nbsp; display: grid;&nbsp; grid-template-columns: 1fr 1fr;&nbsp; grid-template-rows: 1fr 1fr;&nbsp; grid-template-areas: "logo faq", "about-us";}.logo {&nbsp; background-color: blue;&nbsp; grid-area: logo;}.faq {&nbsp; background-color: red;&nbsp; grid-area: faq;}.aboutUs {&nbsp; background-color: cyan;&nbsp; grid-area: about-us;}<div class="grid">&nbsp; <div class="logo">&nbsp; &nbsp; LOGO&nbsp; </div>&nbsp; <div class="faq">&nbsp; &nbsp; FAq&nbsp; </div>&nbsp; <div class="aboutUs">&nbsp; &nbsp; About-us&nbsp; </div></div>