What I want is an image grid with squares, and the images are centered within that square. See example which is working on the desktop.
Searched with google and stackoverflow, but can’t find the answer. Who knows, why is this not working on Mobile Safari 17.4.1. (It’s working on Chrome, Firefox, Edge etc.)
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
grid-gap: 4px;
}
.grid::after {
display: none;
}
.grid-item {
aspect-ratio: 1;
}
.grid-item>img {
width: 0;
height: 0;
min-height: 100%;
min-width: 100%;
display: block;
object-fit: cover;
}<div class="card">
<div class="grid">
<a class="grid-item" data-gallery="gallery-1" href="https://picsum.photos/600/900">
<img src="https://picsum.photos/200/300" alt="img">
</a>
<a class="grid-item" data-gallery="gallery-1" href="https://picsum.photos/600/900">
<img src="https://picsum.photos/200/300" alt="img">
</a>
<a class="grid-item" data-gallery="gallery-1" href="https://picsum.photos/600/900">
<img src="https://picsum.photos/200/300" alt="img">
</a>
<a class="grid-item" data-gallery="gallery-1" href="https://picsum.photos/600/900">
<img src="https://picsum.photos/200/300" alt="img">
</a>
<a class="grid-item" data-gallery="gallery-1" href="https://picsum.photos/600/900">
<img src="https://picsum.photos/200/300" alt="img">
</a>
<a class="grid-item" data-gallery="gallery-1" href="https://picsum.photos/600/900">
<img src="https://picsum.photos/200/300" alt="img">
</a>
<a class="grid-item" data-gallery="gallery-1" href="https://picsum.photos/600/900">
<img src="https://picsum.photos/200/300" alt="img">
</a>
<a class="grid-item" data-gallery="gallery-1" href="https://picsum.photos/600/900">
<img src="https://picsum.photos/200/300" alt="img">
</a>
<a class="grid-item" data-gallery="gallery-1" href="https://picsum.photos/600/900">
<img src="https://picsum.photos/200/300" alt="img">
</a>
</div>
</div>