When attempting to create a simple grid with square images, I encountered an issue where the images were overlapping each other and appearing too large when directly placed inside the grid. In order to resolve this problem, I explored using CSS to adjust the image sizes within the grid container.
.grid {
display: grid;
gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}
img {
aspect-ratio: 1 / 1;
background-color: orange;
object-fit: contain;
}<div class="grid">
<img src="https://placehold.co/1920x1080">
<img src="https://placehold.co/1920x1080">
<img src="https://placehold.co/1920x1080">
<img src="https://placehold.co/1920x1080">
<img src="https://placehold.co/1920x1080">
<img src="https://placehold.co/1920x1080">
<img src="https://placehold.co/1920x1080">
<img src="https://placehold.co/1920x1080">
</div>In my experimentation, I found that adding width: 100% and height: 100% to the img element solved the issue. However, I am curious about why explicit dimensions are necessary when the grid layout should dictate the size of the images automatically.
Are there alternative methods for controlling image sizes within a grid, or is specifying dimensions directly the most reliable approach?