<div class="container">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="e"></div>
</div>
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 10px;
grid-auto-flow: row;
grid-template-areas:
"a a a b b b"
"c c d d e e";
width: 100%;
height: 60vh;
}
.a {
grid-area: a;
background-color: red;
}
.b {
grid-area: b;
background-color: green;
}
.c {
grid-area: c;
background-color: blue;
}
.d {
grid-area: d;
background-color: yellow;
}
.e {
grid-area: e;
background-color: orange;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.