Material-ui: Grid container is setting width to 100%

[jbojcic1]

When using Grid component I noticed that container class sets width to 100% which is a problem if you have container which is also an item and should be in row with other element. I know I can workaround with using another nested Grid element but it would be cleaner if it just wouldn't be setting width.

Expected Behavior

Grid container shouldn't be setting width

Current Behavior

Grid container has width set to 100%

Steps to Reproduce

Use Grid container or just go here https://codesandbox.io/s/4rlymrw227 and inspect.

[oliviertassinari]

@jbojcic1 Do you have an example where it's a problem? At first sight, we could remove this style without breaking the visual regression tests. I'm happy to try that out 👍.

[jbojcic1]

@oliviertassinari the issue is if you have a grid container with two grid items which are also containers. Pls check this example https://codesandbox.io/s/8x332xv8x2

Setting width to 100% causes CD to go to the next line.

Sorry about bad initial explanation.

[oliviertassinari]

@jbojcic1 Thank you. We gonna have an issue with the spacing property. The spacing property is also setting a width: 100% minus the spacing size. Removing with: 100% from spacing={0} will make is inconsistent with different spacing values.

I know I can workaround with using another nested Grid element

      <Grid container>
        <Grid item xs>
          <Grid container>
            <Grid item>A</Grid>
            <Grid item>B</Grid>
          </Grid>
        </Grid>
        <Grid item>
          <Grid container>
            <Grid item>C</Grid>
            <Grid item>D</Grid>
          </Grid>
        </Grid>
      </Grid>

So, I'm wondering. What's more important? The spacing={0} use case or making the spacing behavior consistent between zero and non zero values.

[jbojcic1]

I guess spacing is so you can close the ticket. Side question, is there a plan to add gutter/gap (spacing only between grid items without adding space around grid)?

[oliviertassinari]

@jbojcic1 I want to work on a spacing component. Would that help?

[jbojcic1]

@oliviertassinari spacing component would be used inside grid to add space between items?

[jbojcic1]

Also perhaps note should be added to the docs about using same Grid component as item and container.

[oliviertassinari]

@jbojcic1 It's a possible use case yes. We could also make the grid inherit from the component.