Grid layout images are not equal height

Question

I am using a CSS grid to make a layout like the one below, but the images are not equal in height. I thought this would be the case by using object-fit...

.row1 {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-gap: 5%;
}

img {
  object-fit:cover;
  height:100%;
  width:100%;
}

<div class="container">

<div class="row1">
  <div>
    <img src="https://placeimg.com/1550/485/any">
    <p>
      This is some content 1
    </p>
        <p>
      This is a bit longer content that is used to describe something
    </p>
    <p>
      <a href="#">Click Here</a>
    </p>
  </div>
  
    <div>
    <img src="https://placeimg.com/1550/460/any">
    <p>
      This is some content 2
    </p>
    <p>
      This is a bit longer content that is used to describe something, sometimes it can be really long like this example
    </p>
    <p>
      <a href="#">Click Here</a>
    </p>
  </div>
  
    <div>
    <img src="https://placeimg.com/1550/420/any">
    <p>
      This is some content 3
    </p>
    <p>
      This is a bit longer content that is used to describe something
    </p>
    <p>
      <a href="#">Click Here</a>
    </p>
  </div>
  
</div>

</div>

Answer 1

^{The issue is only happening on chrome, Fiferox is rendreing this well}

I though this would be the case by using object-fit...

object-fit never change the height/width of an element (CSS object-fit: contain; is keeping original image width in layout). This property is only useful to keep the ratio of the image when this one is distorted (Object-fit On A Canvas Element)

Now the real issue is the use of height:100% in this case that is not very intuitive. If we remove it we will have the following:

.row1 {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-gap: 5%;
}

img {
  object-fit:cover;
  width:100%;
}

<div class="container">

<div class="row1">
  <div>
    <img src="https://placeimg.com/1550/485/any">
    <p>
      This is some content 1
    </p>
        <p>
      This is a bit longer content that is used to describe something
    </p>
    <p>
      <a href="#">Click Here</a>
    </p>
  </div>
  
    <div>
    <img src="https://placeimg.com/1550/460/any">
    <p>
      This is some content 2
    </p>
    <p>
      This is a bit longer content that is used to describe something, sometimes it can be really long like this example
    </p>
    <p>
      <a href="#">Click Here</a>
    </p>
  </div>
  
    <div>
    <img src="https://placeimg.com/1550/420/any">
    <p>
      This is some content 3
    </p>
    <p>
      This is a bit longer content that is used to describe something
    </p>
    <p>
      <a href="#">Click Here</a>
    </p>
  </div>
  
</div>

</div>

Note how in this case the second column is the one with the biggest height thus this one is defining the height of the tracks:

Now the height:100% will be relative to this height defined but it won't work in the second column as it will create a cycle since this column was initially defining the height and only the 1st and 3rd image will get stretched and the text will overflow. (Firefox is stretching all the columns so not sure wich behavior is the correct one)

.row1 {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-gap: 5%;
}

img {
  object-fit:cover;
  height:100%;
  width:100%;
}

<div class="container">

<div class="row1">
  <div>
    <img src="https://placeimg.com/1550/485/any">
    <p>
      This is some content 1
    </p>
        <p>
      This is a bit longer content that is used to describe something
    </p>
    <p>
      <a href="#">Click Here</a>
    </p>
  </div>
  
    <div>
    <img src="https://placeimg.com/1550/460/any">
    <p>
      This is some content 2
    </p>
    <p>
      This is a bit longer content that is used to describe something, sometimes it can be really long like this example
    </p>
    <p>
      <a href="#">Click Here</a>
    </p>
  </div>
  
    <div>
    <img src="https://placeimg.com/1550/420/any">
    <p>
      This is some content 3
    </p>
    <p>
      This is a bit longer content that is used to describe something
    </p>
    <p>
      <a href="#">Click Here</a>
    </p>
  </div>
  
</div>

</div>

You can decrease the content of the second column and the behavior will change since another column will define the height and the image inside the other will get stretched.

.row1 {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-gap: 5%;
}

img {
  object-fit:cover;
  height:100%;
  width:100%;
}

<div class="container">

<div class="row1">
  <div>
    <img src="https://placeimg.com/1550/485/any">
    <p>
      This is some content 1
    </p>
        <p>
      This is a bit longer content that is used to describe something
    </p>
    <p>
      <a href="#">Click Here</a>
    </p>
  </div>
  
    <div>
    <img src="https://placeimg.com/1550/460/any">
    <p>
      This is some content 2
    </p>
    <p>
      <a href="#">Click Here</a>
    </p>
  </div>
  
    <div>
    <img src="https://placeimg.com/1550/420/any">
    <p>
      This is some content 3
    </p>
    <p>
      This is a bit longer content that is used to describe something
    </p>
    <p>
      <a href="#">Click Here</a>
    </p>
  </div>
  
</div>

</div>

---

If you want to have the same height for your image you may need to change the structure of your HTML to make the image a part of the grid and easily stretch them to the same height that you defined. This will work the same in all the borwsers since it doesn't rely on the strange behavior of percentage height.

.row1 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 150px auto; /*set the width you want*/
  grid-gap: 5%;
}

img {
  object-fit: cover;
  width: 100%;
  height:100%;
  order:-1;
}

<div class="container">

  <div class="row1">
    <img src="https://placeimg.com/1550/485/any">
    <div>
      <p>
        This is some content 1
      </p>
      <p>
        This is a bit longer content that is used to describe something
      </p>
      <p>
        <a href="#">Click Here</a>
      </p>
    </div>

    <img src="https://placeimg.com/1550/460/any">
    <div>
      <p>
        This is some content 2
      </p>
      <p>
        <a href="#">Click Here</a>
      </p>
    </div>

    <img src="https://placeimg.com/1550/420/any">
    <div>
      <p>
        This is some content 3
      </p>
      <p>
        This is a bit longer content that is used to describe something
      </p>
      <p>
        <a href="#">Click Here</a>
      </p>
    </div>

  </div>

</div>

Answer 2

How do you expect the images to look like? If all of them should be the same as the rabbit image, I think it has to do actually with the height you are setting; I changed it to min-heigth: 100% instead of height: 100% and they all took the same size of the middle one.

The object-fit property is only telling the images how to distribute themselves on the space they have, so that shouldn't be the issue.

.row1 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 5%;
}

img {
  object-fit: cover;
  min-height: 100%;
  width: 100%;
}

<div class="container">

  <div class="row1">
    <div>
      <img src="https://placeimg.com/1550/485/any">
      <p>
        This is some content 1
      </p>
      <p>
        This is a bit longer content that is used to describe something
      </p>
      <p>
        <a href="#">Click Here</a>
      </p>
    </div>

    <div>
      <img src="https://placeimg.com/1550/460/any">
      <p>
        This is some content 2
      </p>
      <p>
        This is a bit longer content that is used to describe something, sometimes it can be really long like this example
      </p>
      <p>
        <a href="#">Click Here</a>
      </p>
    </div>

    <div>
      <img src="https://placeimg.com/1550/420/any">
      <p>
        This is some content 3
      </p>
      <p>
        This is a bit longer content that is used to describe something
      </p>
      <p>
        <a href="#">Click Here</a>
      </p>
    </div>

  </div>

</div>

EDIT: I notice that the images still look a bit uneven, because the images have different heights; I'd suggest actually setting a height to be used for the image section in the grid-item, so at least that will be consistent on all three items; then the reference for how much space they can use will be the same.

Example with explicit min and max height:

.row1 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 5%;
}

img {
  object-fit: cover;
  min-height: 80px;
  max-height: 120px;
  width: 100%;
}

<div class="container">

  <div class="row1">
    <div>
      <img src="https://placeimg.com/1550/485/any">
      <p>
        This is some content 1
      </p>
      <p>
        This is a bit longer content that is used to describe something
      </p>
      <p>
        <a href="#">Click Here</a>
      </p>
    </div>

    <div>
      <img src="https://placeimg.com/1550/460/any">
      <p>
        This is some content 2
      </p>
      <p>
        This is a bit longer content that is used to describe something, sometimes it can be really long like this example
      </p>
      <p>
        <a href="#">Click Here</a>
      </p>
    </div>

    <div>
      <img src="https://placeimg.com/1550/420/any">
      <p>
        This is some content 3
      </p>
      <p>
        This is a bit longer content that is used to describe something
      </p>
      <p>
        <a href="#">Click Here</a>
      </p>
    </div>

  </div>

</div>