Material-ui: [Grid] Center aligned column Grid items don't fill defined column width

[rhlsthrm]

Problem description

Grid items do not stretch to defined width when using columns centered.

Steps to reproduce

Create column grid container. Define items within grid with certain column widths. Example code:

<div className={classes.root}>
  <Grid container spacing={24} direction="column" align="center">
    <Grid item xs={6}>Hi</Grid>
  </Grid>
</div>

The grid item will size down and only use the column width as the max size.

Versions

• Material-UI: 1.0.0-beta.6
• React: 15.6.1
• Browser: Chrome 60.0.3112.90

[oliviertassinari]

You need to provide a height:

<Grid style={{height: 200, background: 'red'}} container spacing={24} direction="column" align="center">
  <Grid item xs={6} style={{background: 'blue'}}>Hi</Grid>
</Grid>

[rhlsthrm]

Thank you for the response @oliviertassinari. However, that is not what I am asking. I want the width of the blue box in this case to be xs=6, but centered. In your example if you remove the align="center", you can have a column grid of items that horizontally stretch to the defined size: https://codesandbox.io/s/v1n15wq03

If I add back align="center", the boxes shrink to a minimum size: https://codesandbox.io/s/qxqzwyqn2q

I appreciate the help.

[oliviertassinari]

@rhlsthrm I don't get it. Can you draw it?

[oliviertassinari]

Also, this seems to be a usability question.
Please submit support requests and questions to StackOverflow using the tag material-ui. StackOverflow is better suited for this kind of support. The issue tracker is for bug reports and feature discussions. See also our CONTRIBUTING guidelines.

[rhlsthrm]

I want a vertically centered column of grid items that are their defined width. It should look like this:

This does not seem like it works as intended which is why I posted it as a bug.

[oliviertassinari]

You can either use the item & container advance feature:

      <div style={{ display: 'flex', margin: 40, background: 'red' }}>
        <Grid container spacing={24} direction="column">
          <Grid container item spacing={0} justify="center" >
            <Grid item xs={12} style={{ background: 'blue' }}>xs=12</Grid>
          </Grid>
          <Grid container item spacing={0} justify="center" >
            <Grid item xs={6} style={{ background: 'blue' }}>xs=6</Grid>
          </Grid>
          <Grid container item spacing={0} justify="center" >
            <Grid item xs={3} style={{background: 'blue'}}>xs=3</Grid>
          </Grid>
        </Grid>
      </div>

https://codesandbox.io/s/8579896r2

or as simpler one:

      <div style={{ margin: 40, background: 'red' }}>
        <Grid container spacing={0} justify="center" >
          <Grid item xs={12} style={{ background: 'blue' }}>xs=12</Grid>
        </Grid>
        <Grid container spacing={0} justify="center" >
          <Grid item xs={6} style={{ background: 'blue' }}>xs=6</Grid>
        </Grid>
        <Grid container spacing={0} justify="center" >
          <Grid item xs={3} style={{background: 'blue'}}>xs=3</Grid>
        </Grid>
      </div>

https://codesandbox.io/s/l2kno9n5q7

[rhlsthrm]

Thank you, this gives me what I need. It still seems like this is a workaround and not the ideal solution, but it will get me where I need to. Feel free to close if you think this is as designed.

[vladbilyk]

@oliviertassinari could you please add this example to the docs?