為什麼我的 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中文網其他相關文章！