Kevin Powell - Community•5w 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

ἔρως•5w 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•5w ago

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

ἔρως•5w 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•5w 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 😄

ἔρως•5w ago

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

KesSaftOP•5w ago

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

KesSaftOP•5w ago

it doesn't scroll too far

KesSaftOP•5w ago

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

ἔρως•5w 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•5w ago

no, still nothing.

ἔρως•5w ago

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

KesSaftOP•5w ago

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

ἔρως•5w 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•5w ago

this is what I get using flex

KesSaftOP•5w 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.

ἔρως•5w ago

that would be the efficient way

KesSaftOP•5w 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!!

ἔρως•5w ago

you're welcome

MarkBoots•5w ago

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

Mark Boots

CodePen

Untitled

...

ἔρως•5w ago

😮 the code is clean af and no auto-fit

Gaming

Programming

Horizontal Grid Image Gallery