网格区域没有在CSS网格中正确布局 [英] Grid areas not laying out properly in CSS Grid

问题描述

我想让我的网站使用CSS网格系统，但它似乎没有工作。这里是我的代码：

.grid {display：grid; grid-template-columns：1fr 1fr; grid-template-rows：1fr 1fr; grid-template-areas：logo faqabout-us;}。logo {background-color：blue; grid-area：logo;}。faq {background-color：red; grid-area：faq;}。aboutUs {background-color：cyan; grid-area：about-us;}

< div类= 网格 > < div class =logo> LOGO< / div> < div class =faq> FAq< / div> < div class =aboutUs>关于我们< / div>< / div>

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

.grid {display：grid; grid-template-columns：1fr 1fr; grid-template-rows：1fr 1fr; grid-template-areas：logo faqabout-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类= 网格 > < div class =logo> LOGO< / div> < div class =faq> FAq< / div> < div class =aboutUs>关于我们< / div>< / div>

您可以使用句点或不间断的句点来表示空单元格（ spec reference ）。
$ b

.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类= 网格 > < div class =logo> LOGO< / div> < div class =faq> FAq< / div> < div class =aboutUs>关于我们< / div>< / div>

从Grid规范：

7.3。命名空间： grid-template-areas
property

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

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

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

注意：正如规范中所述，除了相同数量的列之外，网格区域还必须是矩形（查看这篇文章了解更多详情）。

I want to make my website using CSS grid system but it seems not to be working. Here is my code:

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

解决方案

When using the grid-template-areas property, string values must have the same number of columns.

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

You can use a period, or an unbroken line of periods, to represent an empty cell (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>

From the Grid spec:

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

All strings must have the same number of columns, or else the declaration is invalid.

If a named grid area spans multiple grid cells, but those cells do not form a single filled-in rectangle, the declaration is invalid.

Non-rectangular or disconnected regions may be permitted in a future version of this module.

Note: As stated in the spec, in addition to an equal number of columns, grid areas must also be rectangular (see this post for more details).

这篇关于网格区域没有在CSS网格中正确布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！