CSS grid while keeping aspect ratio - css

Question

Im trying to create css grid while keeping the same height of columns and I want to keep 16:9 ratio for first item. I also want to fit these images in but it seems they are not fitting by few pixels.
Is there any way to do that with grid? Or will I have to do it with 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>

Answer 1

You can simplify your code like below:
.container {
width: 480px;
height: 480px;
}
.grid {
display: grid;
grid-template-columns: 4fr 3fr; /* adjust this like you want */
grid-gap: 0.375rem;
}
img:nth-child(1) {
aspect-ratio: 16 / 9;
}
img:nth-child(2) {
grid-row: span 2;
/* the below will make sure the image get the height of first column*/
height: 0;
min-height: 100%;
/* */
}
img {
width: 100%;
object-fit: cover;
}
<div class="container">
<div class="grid">
<img src="https://picsum.photos/1280/720" alt="" srcset="">
<img src="https://picsum.photos/300/600" alt="" srcset="">
<img src="https://picsum.photos/480/320" alt="" srcset="">
</div>
</div>