没有空格？反应 + MUI 网格答案

【问题标题】：No empty spaces? React + MUI Grid没有空格？反应 + MUI 网格
【发布时间】：2021-04-26 23:16:58
【问题描述】：

我正在使用 Material UI Grid 来制作图像网格，并且我正在尝试消除一些网格项之间的空白。我尝试更改容器的 alignitems 和 justify 值，但没有奏效。
见图片。



    return <Grid container alignItems="flex-start" justify="center" className="img-container" spacing={2}>
        {/* All images */}
        {docs && docs
            .map(image => (
                // In a grid item
                <Grid className="img-item" item key={image.id} xs={12} md={6} lg={4}>
                    {/* all accounts */}
                    {docs2 && docs2
                        .filter((user) => image.userID === user.userID)
                        .map(user => (
                            <div key={image.id} className="div">
                                <img src={image.url} alt="uploaded pic" />
                                <Typography variant="subtitle1"> By {user.userName}

                                    {/* Delete button only renders if currentUser.uid === image.userID*/}
                                    {handleButton(image.userID) &&
                                        <IconButton
                                            color="secondary" aria-label="delete image"
                                            onClick={() => handleDeleteImage(image.id, 
                                            image.userID, image.name)}
                                            component="span" >
                                            <DeleteForever />
                                        </IconButton>}
                                </Typography>
                            </div>
                        ))}
                </Grid>
            ))}
    </Grid>
}

【问题讨论】：

在图像的情况下，间距还取决于图像的尺寸。如果图像不是GridItem 要求的高度，或者图像的高度不同（看这里），那么会有一些空白空间..
所以不能根据里面的图片来调整grid item的高度吗？

标签： javascript reactjs firebase material-ui jsx

【解决方案1】：

问题是Grid container，Grid item 在这种情况下采用其图像的大小，但Grid container 在您的情况下采用较大的Grid item 的大小第一个Grid item 这就是为什么以下网格下方有空格。

在您的情况下，处理图像列表您应该使用GridList 组件而不是Grid。点击此链接了解更多详情https://material-ui.com/components/grid-list/

【讨论】：