0

I have this fiddle: https://jsfiddle.net/6kufq548/

<div class="wrapper">
  <div class="left">
    <img src="https://picsum.photos/id/237/300/200"/>
  </div>

  <div class="right">
    <div class="right--first">
      <img src="https://picsum.photos/id/237/300/200"/>
    </div>
    <div class="right--second">
      <img src="https://picsum.photos/id/237/300/200"/>
    </div>
  </div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: 50% 50%;
}

.left {
  grid-column: 1;
  grid-row: 1;
}

.right {
  grid-column: 2;
  grid-row: 1 / span 2;
}

I want to achieve, that the images in the second column together (!) have the same height as the image in the first column. Later, all images are coming from a database and have the same dimensions, that's why I used fixed and equal sizes here. Despite of this, the height of .right should never be higher than the height of .left.

How can I achieve this with Grid? Or do I need to switch to flex?

Torben
  • 5,388
  • 12
  • 46
  • 78

0 Answers0