<div class="container">
<div class="column">
<img src="https://images.unsplash.com/photo-1488190211105-8b0e65b80b4e?w=400&h=500&fit=crop">
</div>
<div class="column">
<img src="https://images.unsplash.com/photo-1488190211105-8b0e65b80b4e?w=800&h=500&fit=crop" />
</div>
<div class="column-x2">
<img src="https://images.unsplash.com/photo-1488190211105-8b0e65b80b4e?w=500&h=250&fit=crop">
<img src="https://images.unsplash.com/photo-1488190211105-8b0e65b80b4e?w=500&h=250&fit=crop" />
</div>
</div>
.container {
display: flex;
gap: 10px;
width: 100%;
max-width: 1280px;
height: 500px;
margin: 50px auto;
}
.column:nth-child(1) {
width: 25%;
}
.column:nth-child(2) {
width: 50%;
}
.column:nth-child(1) img,
.column:nth-child(2) img{
width: 100%;
height: 100%;
object-fit: cover;
}
.column-x2 {
width: 25%;
display: flex;
flex-direction: column;
gap: 10px;
}
.column-x2 img {
width: 100%;
height: 50%;
object-fit: cover;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.