[Masonry] has NaNpx height & margin.

[ronaklalwaniii]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

Masonary doesn't respect the columns refer to the attached image.

The problem seems to be with the height & margin of MuiMasonry-root class.

The height & margin properties have NaNpx value refer to the attached image.

I have changed the spacing to rem like shown in the docs that's the reason for NaN refer to the attached image.

What do you suggest to fix this?

Expected behavior 🤔

It should work like a normal Masonary.

Steps to reproduce 🕹

Steps:

1. Just copy the masonary from MUI example.
2. Change the spacing to rem like shown in the attached image

Context 🔦

No response

Your environment 🌎

Using chrome browser

`npx @mui/envinfo`

   System:
    OS: Windows 10 10.0.19044
  Binaries:
    Node: 16.15.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.18 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.5.5 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.19041.1266.0), Chromium (102.0.1245.39)
  npmPackages:
    @emotion/react: ^11.7.0 => 11.9.0 
    @emotion/styled: ^11.6.0 => 11.8.1 
    @mui/base:  5.0.0-alpha.82 
    @mui/lab: ^5.0.0-alpha.80 => 5.0.0-alpha.83 
    @mui/material: ^5.6.4 => 5.8.1 
    @mui/private-theming:  5.8.0 
    @mui/styled-engine:  5.8.0 
    @mui/system:  5.8.1 
    @mui/types:  7.1.3 
    @mui/utils:  5.8.0 
    @mui/x-data-grid: 5.10.0 => 5.10.0 
    @mui/x-date-pickers:  5.0.0-alpha.1 
    @types/react: ^18.0.8 => 18.0.9 
    react: ^18.1.0 => 18.1.0 
    react-dom: ^18.1.0 => 18.1.0 
    typescript: ^4.6.4 => 4.7.2 

[vrushank]

+1

[ghost]

+1

[neelbrahmakshatriya]

+1

[ronaklalwaniii]

Any update?

[hbjORbj]

I am working on a fix right now. Will update you soon.

UPDATE: I just opened a pull request for the fix.