Search code examples
htmlcssresponsivecss-grid

How to keep same image heights in fluid CSS grids?

I'm quite new to CSS grids. I need to code a two-column component with fluid, equal-height images inside. I could do it with Flexbox, but this time, I need a CSS grid, and it must be responsive.

That said, this component has 2 images, 1 per column. The original img files have equal heights (340x300, 708x300). I need to show them about 30% and 70% width, minus the gap. I tried to use both 'auto' and fr units, and I also combined them but had no luck.

On the last/large breakpoint, it's all fine:

enter image description here

The problem comes when on smaller breakpoints: I can't keep the 2 images the same exact height (make them scale with the same height):

enter image description here

Here's some code, one of the versions. But any variation of this code (different unit combinations) gives some kind of problems, and none of them makes me have equal height images:

.images-block-box {
  display: grid;
  grid-gap: 16px;
  grid-template-columns: auto auto;
  //grid-template-columns: 1fr auto;
  //grid-template-columns: 1fr 2fr;
  //grid-template-columns: 33.333% 66.666%;
}

Ah, and obviously, the images are fluid (max-width:100%; height: auto).

How to solve it?

Solution

  • The original img files have equal heights (340x300, 708x300).

    You can exploit the fact that fractional units work in proportions of the items. So use grid-template-columns: 340fr 708fr if the images file are not going to change. See demo below:

    .images-block-box{
  display: grid;
  grid-gap: 16px;
  grid-template-columns: 340fr 708fr;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}
    <div class="images-block-box">
  <img src="https://via.placeholder.com/340x300"/>
  <img src="https://via.placeholder.com/708x300"/>
</div>