Created from #44376 (comment).

Latest version

• I have tested the latest version

Steps to reproduce

Steps:

1. Open this link to live example: https://stackblitz.com/edit/react-ziw5rb?file=Demo.tsx,package.json
2. Toggle the checkbox, which turns on and off the CSS variables mode
3. Notice how the grid shifts

Current behavior

Original report (#44376 (comment))

When you are combining Container with Grid then the margin-top and margin-left is not calculated properly for the Grid or maybe for the Container - hard to say; but this change definitely caused that.

Look

before

after

The difference is on Grid element that margin top and left styles changed:
from:

    margin-top: calc(-2* var(--mui-spacing));
    margin-left: calc(-2* var(--mui-spacing));

to:

    margin-top: -calc(2* var(--mui-spacing));
    margin-left: -calc(2* var(--mui-spacing));

Worth to mention that before variable era everything was alright with the styles

Search keywords

grid css variables spacing

Your environment

    "react": "19.0.0",
    "react-dom": "19.0.0",
    "@mui/material": "6.1.10",
    "@emotion/react": "11.13.5",
    "@emotion/styled": "11.13.5",
    "@types/react": "18.3.13",
    "@types/react-dom": "18.3.1",