Search code examples
cssreactjsreact-masonry

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

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

Solution

  • I added to masonry-grid_column class

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