Estou usando o seguinte código para criar um álbum (dentro do WordPress, mas para este exemplo isso é irrelevante):
É assim que acontece:
O que eu esperava fazer é que as imagens da última linha sempre se estendessem por essa linha. Assim, quando houver apenas uma imagem, deixe-a com 100% de largura e maior em altura, e para duas imagens, com 50% de largura e maior em altura.
O número de imagens é diferente para cada página. Alguma dica de como fazer isso?
.gallery {
display: grid;
grid-template-columns: auto auto auto;
gap: 8px;
}
.gallery>.img {
width: 100% !important;
position: relative;
padding-bottom: 75%;
}
.gallery img {
object-fit: cover;
object-position: 50%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
}
<div class="gallery">
<div class="img">
<img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
</div>
<div class="img">
<img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
</div>
<div class="img">
<img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
</div>
<div class="img">
<img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
</div>
<div class="img">
<img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
</div>
<div class="img">
<img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
</div>
<div class="img">
<img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
</div>
</div>