Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Nested grid items that are also containers don't stretch to full width if nested vertically

See original GitHub issue

This is not a v0.x issue.
I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

If you nest a grid with a single <Grid> element that has both item and container props set to true, I expect the layout to display exactly the same as if there were an outer ‘item’ element and an inner ‘container’ element. So you would expect the following two snippets to display exactly the same:

<Grid container spacing={16}>
    <Grid container item xs={3} spacing={16}>
       .....
    </Grid>
    <Grid  container item xs={9} spacing={16}>
       ....
    </Grid>
  </Grid>

<Grid container spacing={16}>
    <Grid item xs={3}>
      <Grid container spacing={16}>
         ....
      </Grid>
    </Grid>
    <Grid item xs={9}>
      <Grid container spacing={16}>
         ....
      </Grid>
    </Grid>
  </Grid>

Current Behavior 😯

The display is the same if the outer grid is vertical, as in the example in the docs https://material-ui.com/layout/grid/#nested-grid

However, if the outer grid represents columns, as in the code above, the horizontal layout is different. There is a right margin on the right of the grid with the single element nesting

Screenshot 2019-04-04 at 12 33 35

Steps to Reproduce 🕹

Link: https://codesandbox.io/embed/0xjjnkozw

Make a nested grid representing two columns, using two items. Inside each item create a new grid with a nested container item. As below

<Grid container spacing={16}>
    <Grid item xs={3}>
      <Grid container spacing={16}>
         ....
      </Grid>
    </Grid>
    <Grid item xs={9}>
      <Grid container spacing={16}>
         ....
      </Grid>
    </Grid>
  </Grid>

The two items will take up the full horizontal space of the outer grid
Now edit the layout so that the column items and their inner containers are the same element:

<Grid container spacing={16}>
    <Grid container item xs={3} spacing={16}>
       .....
    </Grid>
    <Grid  container item xs={9} spacing={16}>
       ....
    </Grid>
  </Grid>

The vertical columns no longer take up the full horizontal space

You can see the two layouts side by side in the codesandbox above and screenshot above.

I apologise in advance if I misunderstood how the nesting is supposed to work!

Context 🔦

I’m trying to create a two column layout of cards, where the left hand column has a verticle list of cards, and the right hand column contains multiple cards in a grid. I was expecting to be able to use single <Grid> elements for the column items and their inner containers, but could only get the two columns to strecth to full width if I separated the elements.