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中文網其他相關文章！
