我想使我的網(wǎng)站使用CSS網(wǎng)格系統(tǒng)，但似乎無法正常工作。這是我的代碼：.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條經(jīng)驗 獲得超3個贊
使用該grid-template-areas屬性時，字符串值必須具有相同的列數(shù)。
.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>
您可以使用一個句點或不間斷的句點行來表示一個空單元格（規(guī)范參考）。
.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>
從網(wǎng)格規(guī)范：
7.3。命名區(qū)域：the grid-template-areas 屬性
所有字符串的列數(shù)必須相同，否則聲明無效。
如果命名的網(wǎng)格區(qū)域跨越多個網(wǎng)格單元，但是這些單元不形成單個填充矩形，則聲明無效。
在此模塊的將來版本中，可能會允許非矩形或不連續(xù)區(qū)域。
注意：如規(guī)范中所述，除了相等數(shù)量的列之外，網(wǎng)格區(qū)域還必須是矩形的（有關(guān)更多詳細信息，請參見此帖子）。
翻翻過去那場雪
TA貢獻2065條經(jīng)驗 獲得超14個贊
如果這：
是理想的結(jié)果，那么您只犯了一個小錯誤。
您已在此處將網(wǎng)格設(shè)置為2 x 2正方形：
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
但是您并沒有填補所有空間。
grid-template-areas: "logo faq", "about-us";
該行代碼說“在頂部的兩個方框中分別放置徽標和常見問題。在底部的兩行中放置大約”，這將導(dǎo)致錯誤。如果要grid-area填充整個空間，則需要聲明兩次。因此，以上行變?yōu)椋?/p>
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>
添加回答
舉報
0/150
提交
取消