I am having some issues with CSS grid (i think).
The left-hand side of my grid won’t match the height on the other side. There always seems to be a gap at the bottom of the big image.
I need the grid all to be equal heights and 4/3 aspect ratio.
Any ideas? Thanks
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;
}
<div class="grid-gallery">
<div class="grid-gallery-item">
<button>
<img src="https://via.placeholder.com/400" />
</button>
</div>
<div class="grid-gallery-item">
<button>
<img src="https://via.placeholder.com/400" />
</button>
</div>
<div class="grid-gallery-item">
<button>
<img src="https://via.placeholder.com/400" />
</button>
</div>
<div class="grid-gallery-item">
<button>
<img src="https://via.placeholder.com/400" />
</button>
</div>
<div class="grid-gallery-item">
<button>
<img src="https://via.placeholder.com/400" />
</button>
</div>
</div>