Can someone please explain why my CSS grid layout is not working as expected? I defined a grid-template-area for a 4x3 grid with equal sections, but it's not displaying correctly. I have provided a fiddle to demonstrate the issue along with the code snippet below. Any insights on what went wrong would be greatly appreciated. Fiddle
.container {
display: grid;
width: 100%;
height: 100%;
grid-template-areas: "a b c d"
"b c d a"
"a b c d";
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
}
.container > header {
grid-area: a;
}
.container > nav {
grid-area: b;
}
.container > main {
grid-area: c;
}
.container > footer {
grid-area: d;
}
<div class="container">
<header><h1>A</h1></header>
<nav><h1>B</h1></nav>
<main><h1>C</h1></main>
<footer><h1>D</h1></footer>
</div>