1

I'm making an image gallery using Semantic UI and I'm having some difficulties getting rid of the extra white space between images that aren't as big as others. Here's the link to the codesandbox repo I know Semantic UI's grid is based off of flexbox but I'm not sure how I can modify it.I want to make the grid come out like this

If I have an array of images such as:

const images = { 
  {id: 1, source: '/image1.jpg' },
  { id: 2, source: '/image2.jpg' },
  { id: 3, source: '/image3.jpg' }
}

And map through it in a grid:

<Grid columns={3}>
    {images.map(image => (
      <Grid.Column key={image.key}>
        <Image src={image.source} />
      </Grid.Column>
    ))}
</Grid>

If I use this solution, there will be a lot of white space in between all of the images because of the different sizes.

isaaca
  • 47
  • 8

1 Answers1

1

So your current structure is mapping images like this:

1 2 3
4 5 6
7 8 9

But the example you've shown is mapping images like this:

1 4 7
2 5 8
3 6 9

So instead of putting 1 image inside each Grid.Column component, you should put multiple images in each Grid.Column component. Theoretically 1/3 would be right in this case, but if you shrink the page width you might want to recalculate the number of columns.

let cols = this.state.numberOfColumns
let imagesplit = []
for (let i = 0; i < images.length; i + cols) {
  for (let j = 0; j < cols; j++) {
    if (!imagesplit[j]) { imagesplit[j] = [] }
      if (images[i+j]) {
        imagesplit[j].push(images[i+j]
      }
  }
}
<Grid columns={cols}>
    { imagesplit.map(imagearray => {
      return imagearray.map(images => (
        <Grid.Column key={image.key}>
          <Image src={image.source} />
        </Grid.Column>
    ))}}}
</Grid>
Sydney Y
  • 2,912
  • 3
  • 9
  • 15
  • I was thinking about that and how would I map over the array of images for multiple columns. I'm going to have multiple sets of images so I don't want to manually add all the images to different cloumns. – isaaca Feb 29 '20 at 05:03
  • Okay, phew, example. Please excuse my formatting, I'm on a mobile but I tried! – Sydney Y Feb 29 '20 at 05:26