英文:
Blank spaces inside Masonry column - React.JS, react-masonry-css and SCSS
问题
I'm doing a fetch list that returns random card sizes with 2 widths:
- Horizontal (Larger)
- Default (Horizontal / 2)
And I'm getting blank spaces in masonry columns:
I'm working with react-masonry-css and with these styles:
.masonry-grid {
display: flex;
gap: 1rem;
width: auto;
}
.masonry-grid_column {
background-clip: padding-box;
}
.masonry-grid_column > div {
margin-bottom: 30px;
}
I want to auto-fill empty blank spaces with the next card if it fits inside the space, and the next-next card replaces the site of the previous card.
英文:
I'm doing a fetch list that return random card sizes with 2 widths:
- Horizontal (Larger)
- Default (Horizontal / 2)
And I'm getting blank spaces in masonry columns:
I'm working with react-masonry-css and with this styles:
.masonry-grid {
display: flex;
gap: 1rem;
width: auto;
}
.masonry-grid_column {
background-clip: padding-box;
}
.masonry-grid_column > div {
margin-bottom: 30px;
}
I want to auto fill empty blank spaces with the next card if it fits inside the space and the next next card replace site of previous card.
答案1
得分: 0
如果您使用react-masonry-css
的Masonry组件,您可以使用breakpointCols
属性。
const breakpointCols = {
default: 2, // 默认宽度下的列数
600: 1, // 小于600px宽度下的列数
};
<Masonry
breakpointCols={breakpointCols}
...
>...<\/Masonry>
只需将卡片放入Masonry组件中,这样您就可以看到以砌体模式放置的组件而无缝隙。
英文:
If you use Masonry component of react-masonry-css
, you can use breakpointCols
property.
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>
Just place cards in Masonry component, that way, you can see components placed in masonry mode without gaps.
答案2
得分: 0
<p>I added to masonry-grid_column class<p>
{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
英文:
<p>I added to masonry-grid_column class<p>
{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论