<div class='container'>
<div class='item a'><h1>A</h1></div>
<div class='item b'><h1>B</h1></div>
<div class='item c'><h1>C</h1></div>
</div>
.container {
width: 300px;
height: 300px;
display: grid;
grid-gap: 15px;
grid-template-areas:
"a b"
"c c"
"c c";
}
.item {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.item h1 {
margin: 0;
color: white;
}
.item.a {
background-color: #ff914d;
grid-area: a;
}
.item.b {
background-color: #7ed957;
grid-area: b;
}
.item.c {
background-color: #38b6ff;
grid-area: c;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.