橫跨磚牆列的空白空間 – React.JS、react-masonry-css和SCSS

huangapple go评论63阅读模式
英文:

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:

Problem Image

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.

Expect Solution Image

英文:

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:

Problem Image

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.

Expect Solution Image

答案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
};

&lt;Masonry
  breakpointCols={breakpointCols}
  ...
&gt;...&lt;/Masonry&gt;

Just place cards in Masonry component, that way, you can see components placed in masonry mode without gaps.

答案2

得分: 0

&lt;p&gt;I added to masonry-grid_column class&lt;p&gt;

{
 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;
}

huangapple
  • 本文由 发表于 2023年5月22日 22:42:56
  • 转载请务必保留本文链接:https://go.coder-hub.com/76307340.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定