Images scaling incorrectly in grid

Question

I need to display a simple grid with square images. I was surprised to find out that it doesn't work properly when images are direct children of the grid. Images get too large, overlapping each other.

.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>

It works correctly if I apply width: 100% and height: 100% to img, but I'm trying to understand why.

Is there some additional way of handling image sizes inside the grid? Why do they require explicit dimensions when the grid should already instruct them of such?

score 2 · Accepted Answer · edited Sep 01 '23 at 15:37

2

Why do they require explicit dimensions when the grid should already instruct them of such?

Where does the grid provide these instructions? It doesn't.

Your rule grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)) sets up the columns. It doesn't apply to the content inside those columns.

Without adding width: 100% to the images, they compute to their intrinsic size, which in this case is 1920 x 1080.

As a general practice in HTML/CSS, add img { width: 100%; height: auto } to prevent images from overflowing their containers.

edited Sep 01 '23 at 15:37

Robo Robok

21,132
17
68
126

answered Sep 01 '23 at 15:30

Michael Benjamin

346,931
104
581
701

But images ARE the columns, right? – Robo Robok Sep 01 '23 at 15:34
No. The images are content inside the columns. The columns are tracks created by the grid container. – Michael Benjamin Sep 01 '23 at 15:35
You could argue that the images are the columns in flexbox. But grid operates a bit differently, having actual rows and columns, not just flex lines. – Michael Benjamin Sep 01 '23 at 15:36
This is interesting, I have never thought about that this way. – Robo Robok Sep 01 '23 at 15:37
This answer may provide more clarity: https://stackoverflow.com/a/45599428 – Michael Benjamin Sep 01 '23 at 15:39
1

Gonna give it a read, thanks Michael! – Robo Robok Sep 01 '23 at 15:41

Images scaling incorrectly in grid

1 Answers1