Kevin Powell - Community•2mo ago

Horizontal Grid Image Gallery

I want to create such a image gallery basically. This is what I already have but my problem is, that the last columns only shrink when there are more images added but the images should all stay the same size but it should be horizonally scrollable. Any idea?

<div className="images">
        {room.images.map((image, index) => (
          <img key={index} className={`image-${index}`} src={image} />
        ))}
      </div>

<div className="images">
        {room.images.map((image, index) => (
          <img key={index} className={`image-${index}`} src={image} />
        ))}
      </div>

main .images {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(auto-fill, min(200px, 15dvw));
  grid-template-rows: repeat(2, min(200px, 15dvw));
  gap: 10px;
  overflow-x: auto;
  width: 100%;
  flex-shrink: 0;
}

main .images img {
  height: 100%;
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: min(20px, 2dvw);
}

main .images .image-0 {
  grid-column: span 2;
  grid-row: span 2;
}

main .images {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(auto-fill, min(200px, 15dvw));
  grid-template-rows: repeat(2, min(200px, 15dvw));
  gap: 10px;
  overflow-x: auto;
  width: 100%;
  flex-shrink: 0;
}

main .images img {
  height: 100%;
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: min(20px, 2dvw);
}

main .images .image-0 {
  grid-column: span 2;
  grid-row: span 2;
}

20 Replies

ἔρως•2mo ago

you have auto-fit and want it to overflow? thats ... yeah, that wont work if you want auto-fit, it will never overflow and if you want it to overflow, you cant have autofit

KesSaftOP•2mo ago

so is there another way to do it then without autofit?

ἔρως•2mo ago

what you can try is to add a parent that has overflow-x: auto and remove the width on the div with the images

KesSaftOP•2mo ago

na, still shrinking the images what works it settings the width to max-content, but then it takes far to many columns into account 😄

ἔρως•2mo ago

you can try to play around with grid-auto-flow i would try column dense

KesSaftOP•2mo ago

just setting it to dense and the images div to width max-content works to some extend

KesSaftOP•2mo ago

it doesn't scroll too far

KesSaftOP•2mo ago

but it doesn't align it that well setting it to column dense doesn't change anything

ἔρως•2mo ago

you have to set the grid-auto-columns to 1fr, so it takes the same size as the others or ... try with flex

KesSaftOP•2mo ago

no, still nothing.

ἔρως•2mo ago

display: flex; flex: 1 1 300px; or something

KesSaftOP•2mo ago

but how would I do that so I keep the layout with the first one beeing bigger

ἔρως•2mo ago

you can set the first one to have 2x the flex size, but im not sure if it would work well 🤔 the crazy and inneficient idea is to use grid and then flex on the other images

KesSaftOP•2mo ago

this is what I get using flex

KesSaftOP•2mo ago

you mean grid with one row and then flex for the images in columns what I could do is to not use auto-fill in the grid but calculate it using the available images.

ἔρως•2mo ago

that would be the efficient way

KesSaftOP•2mo ago

or just set it to a really high number I think that is actually the best option in my case as there is a max of 10 images the user can display in this way... 😄 But thanks for your effort!!

ἔρως•2mo ago

you're welcome

MarkBoots•2mo ago

do you mean like so? https://codepen.io/MarkBoots/pen/wvVPaVg

Mark Boots

CodePen

Untitled

...

ἔρως•2mo ago

😮 the code is clean af and no auto-fit

Gaming

Programming

Horizontal Grid Image Gallery