为什么我的 CSS 网格区域布局不正确？

CSS 网格中的网格区域故障排除

使用 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;
}

在此示例中，我们想要创建一个具有两列和两行的网格。但是，“about-us”区域未按预期呈现。

解决方案

出现此问题是因为 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";
}

现在，这些区域已按预期正确布局。请记住，使用 grid-template-areas 属性时，确保字符串值与网格配置对齐对于正确的网格布局至关重要。

以上是为什么我的 CSS 网格区域布局不正确？的详细内容。更多信息请关注PHP中文网其他相关文章！