title: How to create a dynamic, responsive grid?
body: <p>Im trying to create a dynamic, responsive grid. Just like any standard movie website. in my react project. </p>
  
  <p>I have tried material-ui grid component but am unable to justify the children to flex-start whilst also centering the parent container. i can justify-content center but this looks strange if the bottom row is not full.</p>
  
  <pre><code>const styles = theme =&gt; ({
    root: {
      flexGrow: 1,
    },
    paper: {
      height: 140,
      width: 100,
    },
    control: {
      padding: theme.spacing.unit * 2,
    },
  });
  
  class Movies extends React.Component {
    state = {
      spacing: '16',
    };
  
    render() {
      const { classes } = this.props;
      const { spacing } = this.state;
  
      return (
        &lt;Grid container className={classes.root} spacing={16}&gt;
          &lt;Grid item xs={12}&gt;
            &lt;Grid container className={classes.demo} justify="flex-start" spacing={Number(spacing)}&gt;
              {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15].map(value =&gt; (
                &lt;Grid key={value} item&gt;
                  &lt;Paper className={classes.paper} /&gt;
                &lt;/Grid&gt;
              ))}
            &lt;/Grid&gt;
          &lt;/Grid&gt;
        &lt;/Grid&gt;
      );
    }
  }
  
  </code></pre>
  
  <p>i expect the parent container/child items to be centered.</p>
  
  <p>here is the output: </p>
  
  <p><a href="https://i.stack.imgur.com/kriQ1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kriQ1.png" alt="enter image description here"></a></p>
  
  <p>if there is another way of creating a responsive movie grid, please let me know.</p>