小编典典

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

html

我想使我的网站使用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>

阅读 261

收藏
2020-05-10

共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>

您可以使用句点或句点的不间断行来表示一个空单元格(规范参考)。

.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。 命名区域:the grid-template-areas属性]

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

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

在此模块的将来版本中,可能会允许非矩形或不连续区域。

2020-05-10