<div class="grid">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
</div>
.grid {
display: grid;
grid-gap: 20px;
/*
grid-template-areas: "one one" "two four" "three four";
grid-template-columns: 1fr 2fr;
grid-template-rows: 200px;
*/
grid: "one one" 200px
"two four"
"three four"
/ 1fr 2fr;
}
.item1 {
grid-area: one;
}
.item2 {
grid-area: two;
}
.item3 {
grid-area: three;
}
.item4 {
grid-area: four;
}
This Pen doesn't use any external JavaScript resources.