CSS-сетка, соответствующая высоте ⇐ CSS

[Anonymous]

У меня возникли некоторые проблемы с сеткой CSS (я думаю).
Левая часть моей сетки не соответствует высоте другой стороны. Кажется, что внизу большого изображения всегда есть пробел.
Мне нужно, чтобы вся сетка была одинаковой высоты и с соотношением сторон 4/3.
Есть идеи? Спасибо

Код: Выделить всё

body {
padding: 40px;
}

* {
margin: 0px;
padding: 0px;
}

.grid-gallery {
list-style: none;
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 1rem;
}

.grid-gallery-item:first-child {
grid-row: span 2;
}

img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
aspect-ratio: 4 / 3;
}

Код: Выделить всё

[img]https://via.placeholder.com/400[/img]



[img]https://via.placeholder.com/400[/img]



[img]https://via.placeholder.com/400[/img]



[img]https://via.placeholder.com/400[/img]



[img]https://via.placeholder.com/400[/img]

Подробнее здесь: https://stackoverflow.com/questions/786 ... ng-heights