Css 使用语义UI和React删除图像之间网格中的空白

我正在使用语义用户界面制作一个图像库，我在消除图像之间的额外空白方面遇到了一些困难，这些空白没有其他图像那么大。我知道语义UI的网格是基于flexbox的，但我不确定如何修改它

如果我有一组图像，例如：

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

并在网格中通过它进行映射：

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

{images.map（image=>(
))}

---

如果使用此解决方案，由于大小不同，所有图像之间会有大量空白。

因此，您当前的结构映射图像如下：

1 2 3
4 5 6
7 8 9

1 4 7
2 5 8
3 6 9

但您所展示的示例是这样映射图像：

1 2 3
4 5 6
7 8 9

1 4 7
2 5 8
3 6 9

因此，您不应该在每个Grid.Column组件中放置一个图像，而应该在每个Grid.Column组件中放置多个图像。在这种情况下，理论上1/3是正确的，但是如果缩小页面宽度，可能需要重新计算列数

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>

让cols=this.state.numberOfColumns
让imagesplit=[]
for（设i=0；i{
返回imagearray.map（图像=>(
))}}}

我没有看到CodeSandbox链接。@我刚刚添加了repo，这能解决你的问题吗？@keikai没有，我添加了一张我希望网格看起来像什么的照片。我正在考虑这个问题，以及如何映射多个列的图像数组。我将有多组图像，所以我不想手动添加所有图像不同的克隆。好吧，呸，举个例子。请原谅我的格式设置，我在手机上，但我试过了！