Blank spaces inside Masonry column - React.JS, react-masonry-css and SCSS

Question

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

Answer 1

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.

Answer 2

I added to masonry-grid_column class

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