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

我正在尝试在顶行，菜单和底部的页脚上构建一个简单的布局。如下：

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>

而不是获得所需的布局，而是所有Divs座椅作为内联列。我在做什么错？

您需要从 grid-area属性中删除撇号/单引号，例如： 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

相关内容

最新更新

热门标签：