Nested grids break custom column layout

[githorse]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

I have a nested grid with the standard 12 columns in the outer grid and two children with widths 4 and 8 (4 + 8 = 12):

<Grid container spacing={2}>
 <Grid xs={4}>
   <Item>xs=4</Item>
 </Grid>
 <Grid container xs={8}>
   <Grid xs={6}>
     <Item>nested xs=6</Item>
   </Grid>
   <Grid xs={6}>
     <Item>nested xs=6</Item>
   </Grid>
 </Grid>
</Grid>

Now I redefine the outer grid to have 24 columns, keeping the inner grid at 12 columns, and keep the children's ratio the same (8 + 16 = 24).

<Grid container spacing={2} columns={24}>
 <Grid xs={8}>
   <Item>xs=4</Item>
 </Grid>
 <Grid container xs={16} columns={12}>
   <Grid xs={6}>
     <Item>nested xs=6</Item>
   </Grid>
   <Grid xs={6}>
     <Item>nested xs=6</Item>
   </Grid>
 </Grid>
</Grid>

I would expect this to look the same, since all the ratios are equivalent, but it does not. (It doesn't seem like the columns argument on the inner grid is being ignored, as in #28554 and #30209; instead, the inner grid seems correct, but screws up the layout of the outer.)

If I redefine the child grid's columns to equal 24, the same as the outer grid's, then everything works as expected again:

<Grid container spacing={2} columns={24}>
 <Grid xs={8}>
   <Item>xs=4</Item>
 </Grid>
 <Grid container xs={16} columns={24}>
   <Grid xs={12}>
     <Item>nested xs=12</Item>
   </Grid>
   <Grid xs={12}>
     <Item>nested xs=12</Item>
   </Grid>
 </Grid>
</Grid>

See demo.

Possibly related - #31340?

Current behavior 😯

The second grid layout wraps around to the next line, rather than staying in a single row.

Expected behavior 🤔

I would expect all three grids to look exactly the same, since the ratios of children are the same.

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

  System:
    OS: Linux 5.4 Linux Mint 20.3 (Una)
    CPU: (8) x64 Intel(R) Core(TM) i7-8565U CPU @ 1.80GHz
    Memory: 1.69 GB / 15.33 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 16.15.0 - ~/.nvm/versions/node/v16.15.0/bin/node
    Yarn: 3.2.4 - ~/.yarn/bin/yarn
    npm: 8.5.5 - ~/.nvm/versions/node/v16.15.0/bin/npm
    Watchman: 20210409.063814.0 - /usr/local/bin/watchman
  Managers:
    Cargo: 1.51.0 - ~/.cargo/bin/cargo
    pip3: 20.0.2 - /usr/bin/pip3
    RubyGems: 3.1.2 - /usr/bin/gem
  Utilities:
    CMake: 3.16.3 - /usr/bin/cmake
    Make: 4.2.1 - /usr/bin/make
    GCC: 9.4.0 - /usr/bin/gcc
    Git: 2.25.1 - /usr/bin/git
    Ninja: 1.10.0 - /usr/bin/ninja
    FFmpeg: 4.2.7 - /usr/bin/ffmpeg
  Virtualization:
    Docker: 23.0.1 - /usr/bin/docker
  IDEs:
    Nano: 4.8 - /usr/bin/nano
    Vim: 0.9.0 - /usr/bin/vim
  Languages:
    Bash: 5.0.17 - /usr/bin/bash
    Perl: 5.30.0 - /usr/bin/perl
    Python3: 3.8.10 - /usr/bin/python3
    Ruby: 2.7.0 - /usr/bin/ruby
  Databases:
  Browsers:
   * Chromium: 110.0.5481.100
    Firefox: 110.0

[siriwatknp]

@githorse Thanks for reporting this. The root cause is that the nested Grid does not use --Grid-columns value from the parent because it is overridden by its own --Grid-columns.

I will open a fix soon.