Masonry column - React.JS、react-masonry-css和SCSS内的空白

s4n0splo 于 2023-05-23 发布在 React

关注(0)|答案(2)|浏览(226)

我正在做一个fetch list，它返回随机的卡片大小，宽度为2：

水平（较大）
默认值（水平/ 2）

我在石砌柱子上看到了空白：
Problem Image
我正在使用react-masonry-css和以下样式：

.masonry-grid {
display: flex;
gap: 1rem;
width: auto;
}

.masonry-grid_column {
background-clip: padding-box;
}

.masonry-grid_column > div {
margin-bottom: 30px;
}

我想自动填补空白的下一张卡，如果它适合内的空间和下一个下一张卡取代网站的前一张卡。
Expect Solution Image

css

来源：https://stackoverflow.com/questions/76307340/blank-spaces-inside-masonry-column-react-js-react-masonry-css-and-scss

2条答案

按热度按时间

lokaqttq1#

如果使用react-masonry-css的砌体构件，则可以使用breakpointCols特性。

const breakpointCols = {
  default: 2, // Number of columns for the default width
  600: 1,     // Number of columns for width less than 600px
};

<Masonry
  breakpointCols={breakpointCols}
  ...
>...</Masonry>

只需将卡片放置在砌体构件中，这样，您就可以看到以砌体模式放置的构件，而不会出现间隙。

赞(0）回复(0）举报 2023-05-23

dffbzjpn2#

我添加到masonry-grid_column类

{
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
}

赞(0）回复(0）举报 2023-05-23

我来回答

Masonry column - React.JS、react-masonry-css和SCSS内的空白

2条答案

相关问题

热门标签

最新问答