I'm attempting to create a basic structure with a header in the top row, menu and content in the middle row, and footer at the bottom. Here is what I have so far:
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>However, instead of achieving the desired layout, all the divs are displaying as inline columns. What could be causing this issue?