<section class="square-grid">
<img class="img-2x2" src='https://images.unsplash.com/photo-1604145195376-e2c8195adf29?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTY5NDY5OTl8&ixlib=rb-4.0.3&q=80&w=400' alt=''>
<img class="img-1x1" src='https://images.unsplash.com/photo-1714329781250-64b9125f689c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTY5NDY5OTl8&ixlib=rb-4.0.3&q=80&w=400' alt=''>
<img class="img-1x1" src='https://images.unsplash.com/photo-1714357779320-235515316e22?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTY5NDY5OTl8&ixlib=rb-4.0.3&q=80&w=400' alt=''>
<img class="img-2x2" src='https://images.unsplash.com/photo-1714997219788-660af304f464?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTY5NDY5OTl8&ixlib=rb-4.0.3&q=80&w=400' alt=''>
<img class="img-1x1" src='https://images.unsplash.com/photo-1715089908179-46e5bfa8a44a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTY5NDY5OTl8&ixlib=rb-4.0.3&q=80&w=400' alt=''>
<img class="1x1" src='https://images.unsplash.com/photo-1715257742105-b4f626ce3c2d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTY5NDY5OTl8&ixlib=rb-4.0.3&q=80&w=400' alt=''>
<img class="img-2x1" src='https://images.unsplash.com/photo-1714818282987-7d61de55302e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTY5NDkwNTN8&ixlib=rb-4.0.3&q=80&w=400' alt=''>
<img class="img-1x1" src='https://images.unsplash.com/photo-1715276611450-c4f735a0f7e6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTY5NDkwNTN8&ixlib=rb-4.0.3&q=80&w=400' alt=''>
<img class="img-1x1" src='https://images.unsplash.com/photo-1716500158551-2832edbe6eb4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTY5NDkwNTN8&ixlib=rb-4.0.3&q=80&w=400' alt=''>
</section>.square-grid {
display: grid;
--grid-repeat: repeat(4, 1fr);
gap: 0.5rem;
grid-auto-flow: dense;
grid-template-rows: var(--grid-repeat);
grid-template-columns: var(--grid-repeat);
& img {
display: block;
max-width: 100%;
}
& :is(.img-1x1, .img-2x1) {
grid-row-end: span 1;
}
& :is(.img-2x1, .img-2x2) {
grid-column-end: span 2;
}
& :is(.img-1x1, .img-2x2) {
aspect-ratio: 1 / 1;
}
& .img-2x1 {
aspect-ratio: 16 / 9;
}
& .img-1x1 {
grid-column-end: span 1;
}
& .img-2x2 {
grid-row-end: span 2;
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.