In v6, Grid columnSpacing misbehaves with string pixel values like "16px"

[ChristopherChudzicki]

Steps to reproduce

Link to live example: (required)

Steps:

1. View editable example with v6: https://stackblitz.com/edit/react-hp2ukf?file=Demo.tsx
   • corresponding v5 example that shows expected behavior https://stackblitz.com/edit/react-hp2ukf-xjzryc?file=Demo.tsx
2. Note that specifying columnSpacing="16px" produces extra space on left.

Current behavior

When specifying columnSpacing on Grid using pixels, there's extra space to the left of the grid items.

Note: Locally in development, but not on stackblitz, I can see margin-left: NaNpx on <div class="MuiGrid-root MuiGrid-container">.

Expected behavior

No extra space.

Context

We recently updated MUI from v5 to v6.1.6. I have just noticed this behavior and believe it is a regression. (Edit: I've added a corresponding stackblitz demo for v5)

I understand that Grid2 is preferred now, however we have not had a chance to update all the Grid components yet.

Your environment

npx @mui/envinfo

Using Chrome. Note: This envinfo is for my local, not Stackblitz

  System:
    OS: macOS 14.3.1
  Binaries:
    Node: 20.17.0 - ~/.nvm/versions/node/v20.17.0/bin/node
    npm: 10.8.2 - ~/.nvm/versions/node/v20.17.0/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 130.0.6723.92
    Edge: Not Found
    Safari: 17.3.1
  npmPackages:
    @emotion/react:  11.13.3
    @emotion/styled:  11.13.0
    @mui/base:  5.0.0-beta.61
    @mui/core-downloads-tracker:  6.1.6
    @mui/lab:  6.0.0-beta.14
    @mui/material:  6.1.6
    @mui/material-nextjs:  6.1.6
    @mui/private-theming:  6.1.6
    @mui/styled-engine:  6.1.6
    @mui/system:  6.1.6
    @mui/types:  7.2.19
    @mui/utils:  6.1.6
    @types/react:  18.3.11
    react:  18.3.1
    react-dom:  18.3.1
    typescript:  5.6.3

Search keywords: grid, spacing, nan, negative

[siriwatknp]

Thanks for reporting, a PR to fix this issue has been created.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@ChristopherChudzicki How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.