I'm having trouble replicating a layout using grid-template areas, and for some reason, it's not displaying correctly. I've checked my code multiple times, and it seems correct to me. Can anyone provide guidance on how to successfully recreate this layout using grid-template-areas?
.a {
background: red;
grid-area: a;
}
.b {
background: green;
grid-area: b;
}
.c {
background: aqua;
grid-area: c;
}
.d {
background: darkblue;
grid-area: d;
}
.e {
background: purple;
grid-area: e;
}
.f {
background: orange;
grid-area: f;
}
.grid-container {
display: grid;
margin: auto;
grid-gap: 8px;
grid-template-areas: "a a a a" "b c c c" "b c c c" "b c c c" "b c c c" ". . d d" "e e e e" "e e e e" "e e e e" "f f f f";
}<div class="grid-container">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="e"></div>
<div class="f"></div>
</div>Codepen: https://codepen.io/mauro-scheltens/pen/vYrKdwq
The layout I'm attempting to replicate