[grid] Fix column spacing for nested containers

[Janpot]

• Only increase the level if the nested grid is a container inside a container as per the docs
• The ...LevelX variable doesn't behave correctly. It creates correct gaps on containers, but children don't use the correct variable to calculate their width. The JS logic seems sound though, I just translated it to CSS with a -parent- variable on the container children. It behaves a lot better.
• Abstract the spacing styles generation logic, just like the var consumption logic already was.

Closes https://github.com/mui/material-ui/issues/43707

[mui-bot]

Netlify deploy preview

https://deploy-preview-43733--material-ui.netlify.app/

@mui/joy: parsed: -0.11% :heart_eyes:, gzip: -0.10% :heart_eyes: @material-ui/core: parsed: -0.09% :heart_eyes:, gzip: -0.06% :heart_eyes: Grid2: parsed: -0.68% :heart_eyes:, gzip: -0.32% :heart_eyes: @mui/joy/Grid: parsed: -0.76% :heart_eyes:, gzip: -0.32% :heart_eyes: @material-ui/system: parsed: -0.64% :heart_eyes:, gzip: -0.21% :heart_eyes:

Bundle size report

Details of bundle changes (Toolpad) Details of bundle changes

Generated by :no_entry_sign: dangerJS against 28508f97c3815c05929dd4d792fd831f3cf69d9a