How to display image in css grid?

Question

I am trying to make a css grid for photos but the img-element doesn't display the image in the grid item. There's nothing wrong with the url I am using since it works on other parts of the page but not in the grid system.

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 25px;
  grid-row-gap: 25px;
}

.wrapper > div img {
  max-width: 100%;
  max-height: 100%;
}

<div id="content">
  <div class="wrapper">
    <div><img src="https://placehold.it/100x100" alt=""></div>
    <div>Two</div>
    <div>Three</div>
    <div>Four</div>
    <div>Five</div>
  </div>
</div>

What am I doing wrong?

Answer 1

You can set image width in wrapper class

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 25px;
  grid-row-gap: 25px;
}

.wrapper > div img {
  max-width: 100%;
}

<div id="content">
  <div class="wrapper">
    <div><img src="https://placehold.it/100x100" alt=""></div>
    <div>Two</div>
    <div>Three</div>
    <div>Four</div>
    <div>Five</div>
  </div>
</div>

Answer 2

It is happening for combination of two CSS properties. One is display: grid; in .wrapper selector and other is max-height: 100%; in .wrapper > div img selector.

Firstly you can avoid by remove max-height: 100%; from selector but if you need keep the max-height: 100%; property then you need to add display: block; in .wrapper > div img selector like following:

.wrapper > div img {
    max-width: 100%;
    max-height: 100%;
    display: block;
}