在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>