Question 173858 in CSS Question posted in
Some basic documentation can be found here.

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

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0
    Solved

    It was so easy :'P, I only added to masonry-grid_column class

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

  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search