I am in the process of designing a CSS grid layout where I want to maintain the same height for all columns. Additionally, I would like the first item to have a 16:9 aspect ratio. However, I am encountering an issue where the images are not fitting perfectly and there seems to be a few pixel gaps.
Is there a way to achieve this using grid alone, or do I need to resort to flexbox?
.container {
width: 480px;
max-width: 480px;
height: 480px;
max-height: 480px;
}
.grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: auto;
grid-gap: 0.375rem;
}
.item:nth-child(1) {
aspect-ratio: 16 / 9;
grid-column: span 3;
}
.item:nth-child(2) {
grid-column: span 2;
grid-row: span 2;
}
.item:nth-child(3) {
aspect-ratio: 4 / 3;
grid-column: span 3;
grid-row: auto;
}
.item img {
width: 100%;
height: auto;
object-fit: cover;
}<div class="container">
<div class="grid">
<div class="item"><img src="https://picsum.photos/1280/720" alt="" srcset="" /></div>
<div class="item"><img src="https://picsum.photos/300/600" alt="" srcset="" /></div>
<div class="item"><img src="https://picsum.photos/480/320" alt="" srcset="" /></div>
</div>
</div>