<div class="grid">
<div class="aspect-ratio-box rowspan-2">
11
</div>
<div class="aspect-ratio-box">
22
</div>
<div class="aspect-ratio-box">
33
</div>
</div>
html, body{
padding: 0;
margin: 0;
}
.grid {
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: 1fr;
grid-column-gap: 20px;
grid-row-gap: 20px;
padding: 20px;
}
.rowspan-2 {
grid-row: 1 / 3;
}
.aspect-ratio-box {
background: gray;
}
.aspect-ratio-box::before {
content: "";
width: 1px;
margin-left: -1px;
float: left;
height: 0;
padding-top: 100%;
}
.aspect-ratio-box::after {
content: "";
display: table;
clear: both;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.