在CSS Grid中沒有正確佈局的網格區域

Question

我想使用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>

Answer 1

當使用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>

可以使用週期，或週期的實線，表示一個空的細胞（spec reference）。

.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. Named Areas: the grid-template-areas property

所有字符串必須有相同的列數，否則該聲明是無效的。

如果命名的網格區域跨越多個網格單元格，但這些單元格不構成單個填充矩形，則該聲明無效。

該模塊的未來版本可能允許非矩形或斷開連接的區域。

注：由於在規範中所述，除了相等數量的列，格狀區也必須是矩形（see this post for more details）。

Answer 2

如果：

是期望的結果，那麼你就只發一個小錯誤。

你已經定格爲2×2平方米的位置：

grid-template-columns: 1fr 1fr; 
    grid-template-rows: 1fr 1fr; 

但你不灌裝的全部空間。

grid-template-areas: "logo faq", "about-us"; 

該行代碼說「在頂部的兩個方塊分別放置logo和faq，在最下面的兩行放置了-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>