0

I want to make something like collage where I have 3 images. First is large on left side and two others smaller which placed in right side one above the other. Key feature is that the first image can have different height

enter image description here

I've used a css grid, but I don't know, how to make row (or content) height in second column to be based on first column, where I have element on 2 rows height.

I've created a fiddle for better understanding https://jsfiddle.net/x0jd2Lcf/, but result is not what I want:

.container {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, min-content);
}

.container img:nth-child(1) {
  grid-row: span 2;
}
<div class="container">
  <img src="https://via.placeholder.com/246x354" />
  <img src="https://via.placeholder.com/164x236" />
  <img src="https://via.placeholder.com/164x236" />
</div>

Edit: first image (large, in left column) should not change its size

enter image description here

J. Doe
  • 502
  • 1
  • 7
  • 16
  • Don't think you can do that with your current structure. If you wrap the 2nd/3rd images in a separate element you might - https://stackoverflow.com/questions/34194042/one-flex-grid-item-sets-the-size-limit-for-siblings – Paulie_D Jan 13 '22 at 16:48

1 Answers1

-1

If you wrap every img element in a container, you can use object-fit to fill up the containers entire space without distorting your image.

.container {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, min-content);
}

.container div:nth-child(1) {
  grid-row: span 2;
}

img{
  object-fit: contain;
  height: 100%;
}
<div class="container">
  <div class="img_container">
  <img src="http://sfwallpaper.com/images/random-image-14.jpg" />
  </div>
  <div class="img_container">
  <img src="https://media.istockphoto.com/photos/random-multicolored-spheres-computer-generated-abstract-form-of-large-picture-id1295274245?b=1&k=20&m=1295274245&s=170667a&w=0&h=4t-XT7aI_o42rGO207GPGAt9fayT6D-2kw9INeMYOgo=" />
  </div>
  <div class="img_container">
  <img src="https://media.istockphoto.com/photos/random-multicolored-spheres-computer-generated-abstract-form-of-large-picture-id1295274245?b=1&k=20&m=1295274245&s=170667a&w=0&h=4t-XT7aI_o42rGO207GPGAt9fayT6D-2kw9INeMYOgo=" />
  </div>
</div>
Sigurd Mazanti
  • 2,098
  • 1
  • 8
  • 24