Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Masonry] Incorrect number of columns behaviour when items have dynamic height

See original GitHub issue

Duplicates

I have searched the existing issues

Latest version

I have tested the latest version

Current behavior 😯

If any of the items of the masonry can grow in height, instead of re-accommodate all items to preserve the number of columns, it is creating new columns. Please refer to this sandbox:

Sandbox

In the sandbox demo, if you start opening the accordions, you’ll see the undesired columns being created.

Expected behavior 🤔

The masonry should always stick to the number of columns passed in the columns prop.

Steps to reproduce 🕹

columns

Context 🔦

Trying to use the masonry to displays different cards and controls in a dashboard that could have different (and possibly growing) heights.

Your environment 🌎

`npx @mui/envinfo`

System:
    OS: macOS 12.0.1
  Binaries:
    Node: 14.18.0 - ~/.nvm/versions/node/v14.18.0/bin/node
    Yarn: 1.22.15 - ~/.nvm/versions/node/v14.18.0/bin/yarn
    npm: 6.14.15 - ~/.nvm/versions/node/v14.18.0/bin/npm
  Browsers:
    Chrome: 95.0.4638.69 (this browser was used)
    Edge: Not Found
    Firefox: 91.0.2
    Safari: 15.1
  npmPackages:
    @emotion/react: ^11.5.0 => 11.5.0 
    @emotion/styled: ^11.3.0 => 11.3.0 
    @mui/core:  5.0.0-alpha.54 
    @mui/icons-material: ^5.1.0 => 5.1.0 
    @mui/lab: ^5.0.0-alpha.54 => 5.0.0-alpha.54 
    @mui/material: ^5.1.0 => 5.1.0 
    @mui/private-theming:  5.1.0 
    @mui/styled-engine:  5.1.0 
    @mui/styles: ^5.1.0 => 5.1.0 
    @mui/system:  5.1.0 
    @mui/types:  7.1.0 
    @mui/utils:  5.1.0 
    @types/react: ^17.0.34 => 17.0.34 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    typescript: ^4.4.4 => 4.4.4