Question

我正在尝试构建一个简单的布局，其顶部的标题，中间行的菜单和内容以及底部的页脚。如下所示：

＆＃13;

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';
}

＆＃13;

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

＆＃13;

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

Answer 1

您需要从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

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

1 个答案: