<main>
  <article>
    <img src="https://placecats.com/200/150" />
    <h1>An article</h1>
    <p>Some text</p>
  </article>
  <article>
    <img src="https://placecats.com/100/100" />
    <h1>An article that has a really long heading</h1>
    <p>Some text</p>
  </article>
  <article>
    <img src="https://placecats.com/300/200" />
    <h1>An article</h1>
    <p>Some text that is longer and whatnot and not really the same</p>
  </article>
</main>
main {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

article {
  border: 1px solid red;
  display: grid;
}

article img {
  height: auto;
  width: 100%;
  object-fit: contain;
}

article * {
  border: 1px solid black;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.