为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

跃然一笑 2019-10-22 22:38:26
我想使我的网站使用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>
查看完整描述

2 回答

?
交互式爱情

TA贡献1712条经验 获得超3个赞

使用该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 属性


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


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


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


注意:如规范中所述,除了相等数量的列之外,网格区域还必须是矩形的(有关更多详细信息,请参见此帖子)。


查看完整回答
反对 回复 2019-10-22
?
翻翻过去那场雪

TA贡献2065条经验 获得超13个赞

如果这:


//img1.sycdn.imooc.com//5daf14950001c37c05600038.jpg

是理想的结果,那么您只犯了一个小错误。


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


  grid-template-columns: 1fr 1fr;

  grid-template-rows: 1fr 1fr;

但是您并没有填补所有空间。


  grid-template-areas: "logo faq", "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>


查看完整回答
反对 回复 2019-10-22
  • 2 回答
  • 0 关注
  • 585 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信