我想使我的網站使用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 屬性
所有字符串的列數必須相同，否則聲明無效。
如果命名的網格區域跨越多個網格單元，但是這些單元不形成單個填充矩形，則聲明無效。
在此模塊的將來版本中，可能會允許非矩形或不連續區域。
注意：如規范中所述，除了相等數量的列之外，網格區域還必須是矩形的（有關更多詳細信息，請參見此帖子）。
翻翻過去那場雪
TA貢獻2065條經驗 獲得超14個贊
如果這：
是理想的結果，那么您只犯了一個小錯誤。
您已在此處將網格設置為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>
- 2 回答
- 0 關注
- 622 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消