[Grid2] Support dynamic nested columns

[siriwatknp]

closes #36335

Before:

The nested grid container does not get the --Grid-columns value from its parent because it is overridden by its own variable. The fix is similar to how nested spacing works.

https://stackblitz.com/edit/react-6xxqec?file=demo.tsx

After

https://codesandbox.io/s/material-cra-ts-forked-55ep57?file=/src/App.tsx

---

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Netlify deploy preview

• docs/data/material/components/grid2/grid2.md

Bundle size report

Details of bundle changes

Generated by 🚫 dangerJS against 63a6d1b

[mnajdova]

The logic and demos look good. I left one comment on the CSS variable name.

[mnajdova]

@siriwatknp should we merge this one?

[francescovenica]

would be possible to check if this issue:
#36777

is cause by this pr? I think this doesn't work if the parent is not a grid, I Was able to fix the issue above adding the columns prop, not sure if we should default the column prop to the theme column number

[pongells]

@francescovenica most likely. I just noticed the same issue.