Question 180922 in CSS Question posted in
Some basic documentation can be found here.

Css – Stuck on creating responsive grid layout for variable number of images, fitting the size of the largest element without knowing the value

I’m trying to create a responsive grid layout for images with variable number of elements, all in their original resolution, all centered in their cell. The largest image must be the reference, its cell must exactly fit it, and the grid has to be responsive to the space available (ie create rows only if necessary).

So far so good, the grid I ok for me, but with my approach, we must know the exact size of the largest square image if we want it to be the reference (with no space around).

Maybe it’s not possible to achieve this with pure CSS. I’m not able to, I hope you can give me some tips.

.gallery {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(auto, 100px));
  justify-items: center;
  align-items: center;
}

.gallery img {
  width: auto;
  height: auto;
  object-fit: scale-down;
  object-position: center center;
}
<div class="gallery">
  <img src="https://picsum.photos/25">
  <img src="https://picsum.photos/50">
  <img src="https://picsum.photos/75">
  <img src="https://picsum.photos/100">
  <img src="https://picsum.photos/25">
  <img src="https://picsum.photos/50">
  <img src="https://picsum.photos/75">
  <img src="https://picsum.photos/100">
  <img src="https://picsum.photos/25">
  <img src="https://picsum.photos/50">
  <img src="https://picsum.photos/75">
  <img src="https://picsum.photos/100">
  <img src="https://picsum.photos/25">
  <img src="https://picsum.photos/50">
  <img src="https://picsum.photos/75">
  <img src="https://picsum.photos/100">
</div>

It should be great if I was not dependent of a hard-coded value (100px). Maybe we must compute it with a script, in very last solution.

Tags:

2

Answers


  1. 0

    snippet little better only but still 100px

    .gallery {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  justify-items: center;
  align-items: center;
}

.gallery img {
  width: auto;
  height: auto;
}
    <div class="gallery">
  <img src="https://picsum.photos/25">
  <img src="https://picsum.photos/50">
  <img src="https://picsum.photos/75">
  <img src="https://picsum.photos/100">
  <img src="https://picsum.photos/25">
  <img src="https://picsum.photos/50">
  <img src="https://picsum.photos/75">
  <img src="https://picsum.photos/100">
  <img src="https://picsum.photos/25">
  <img src="https://picsum.photos/50">
  <img src="https://picsum.photos/75">
  <img src="https://picsum.photos/100">
  <img src="https://picsum.photos/25">
  <img src="https://picsum.photos/50">
  <img src="https://picsum.photos/75">
  <img src="https://picsum.photos/100">
</div>

    Masonry layout still not implemented in grid, it’s coming but not yet.
    After you could use masonry plug-in, check here:
    https://masonry.desandro.com/

    Or with javascript, getboudingclient rect you check all img size

    Login or Signup to reply.
  2. 0

    Assuming you want to keep all the images same size as grid.

    .gallery {
            display: grid;
              grid-gap: 1rem;
            grid-template-columns: repeat(auto-fill, minmax(auto, 100px));
            justify-items: center;
            align-items: center;
        }
            
        .gallery img {
            width: 100%; /* changed to 100% from auto */
            height: 100%; /* changed to 100% from auto */
            object-fit: fill; /* changed to fill from scale-down */
            object-position: center center;
        }
    <div class="gallery">
  <img src="https://picsum.photos/25">
  <img src="https://picsum.photos/50">
  <img src="https://picsum.photos/75">
  <img src="https://picsum.photos/100">
  <img src="https://picsum.photos/25">
  <img src="https://picsum.photos/50">
  <img src="https://picsum.photos/75">
  <img src="https://picsum.photos/100">
  <img src="https://picsum.photos/25">
  <img src="https://picsum.photos/50">
  <img src="https://picsum.photos/75">
  <img src="https://picsum.photos/100">
  <img src="https://picsum.photos/25">
  <img src="https://picsum.photos/50">
  <img src="https://picsum.photos/75">
  <img src="https://picsum.photos/100">
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search