为什么我的网格区域属性没有被应用？

Question

我正在尝试构建一个简单的布局，其中页眉位于顶行，菜单和内容位于中间行，页脚位于底部。类似于以下内容：

body {
    color: white;
}
    
.container {
    background: cyan;
    display: grid;
    grid-gap: 5px;    
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 50px 350px 50px;
    grid-template-areas:
        "h h h h h h h h h h h h"
        "m m c c c c c c c c c c"
        "f f f f f f f f f f f f";
}
    
.header {
    background-color: black;
    grid-area: 'h';
}
.menu {
    background-color: orange;
    grid-area: 'm';
}
.content {
    background-color: green;
    /*grid-auto-columns: minmax(auto, 125px);*/
    grid-area: 'c';
}
.footer {
    background-color: grey;
    grid-area: 'f';
}

<body>
    <div class="container">
        <div class="header">HEADER</div>
        <div class="menu">MENU</div>
        <div class="content">CONTENT</div>
        <div class="footer">FOOTER</div>
    </div>
</body>

所有的 div 都作为内联列放置，而不是获得所需的布局。我做错了什么？

Answer 1

您需要从 grid-area 属性中删除 apostrophes/single 引号，如下所示：grid-area: h;

body {
    color: white;
}

.container {
    background: cyan;
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 50px 350px 50px;
    grid-template-areas: "h h h h h h h h h h h h" "m m c c c c c c c c c c" "f f f f f f f f f f f f";
}

.header {
    background-color: black;
    grid-area: h;
}

.menu {
    background-color: orange;
    grid-area: m;
}

.content {
    background-color: green;
    /*grid-auto-columns: minmax(auto, 125px);*/
    grid-area: c;
}

.footer {
    background-color: grey;
    grid-area: f;
}

<body>
    <div class="container">
        <div class="header">HEADER</div>
        <div class="menu">MENU</div>
        <div class="content">CONTENT</div>
        <div class="footer">FOOTER</div>
    </div>
</body>

JSFiddle

为什么我的网格区域属性没有被应用？

Why aren't my grid-area properties being applied?

css

css-grid