<div class="container">
<div class="item a"></div>
<div class="item b"></div>
<div class="item c"></div>
<div class="item d"></div>
<div class="item e"></div>
<div class="item f"></div>
</div>
.container {
display: grid;
grid-template-columns: 2fr 1fr 2fr;
grid-template-rows: 2fr 1fr 2fr;
grid-template-areas:
"a a b"
"c d b"
"e f f";
gap: 10px;
width: 500px;
height: 500px;
}
.a {
grid-area: a;
background-color: royalblue;
}
.b {
grid-area: b;
background-color: gold;
}
.c {
grid-area: c;
background-color: slateblue;
}
.d {
grid-area: d;
background-color: orange;
}
.e {
grid-area: e;
background-color: salmon;
}
.f {
grid-area: f;
background-color: seagreen;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.