CODEWITHSUNDEEP
csscss-grid
S. Schenk
S. Schenk

Reputation: 2170

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

I'm trying to build a simple layout with header on the top row, menu and content in the middle row and footer at the bottom one. Something like the following:

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>

Instead of getting the desired layout, all the divs seat as inline columns . What am I doing wrong?

Upvotes: 1

Views: 70

Answers (1)

Alex
Alex

Reputation: 2775

You need to remove the apostrophes/single quotes from grid-area property, like this: 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

Upvotes: 4

Related Questions