html - 如何创建一个动态的响应式网格？

Question

我正在尝试创建一个动态的响应式网格。就像任何标准的电影网站一样。在我的 react 元素中。

我已经尝试过 material-ui 网格组件，但无法证明 children 在将父容器居中的同时进行 flex-start。我可以证明内容中心，但如果底行未满，这看起来很奇怪。

const styles = theme => ({
  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 (
      <Grid container className={classes.root} spacing={16}>
        <Grid item xs={12}>
          <Grid container className={classes.demo} justify="flex-start" spacing={Number(spacing)}>
            {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15].map(value => (
              <Grid key={value} item>
                <Paper className={classes.paper} />
              </Grid>
            ))}
          </Grid>
        </Grid>
      </Grid>
    );
  }
}

我希望父容器/子项居中。

这里是输出:

如果有另一种创建响应式电影网格的方法，请告诉我。

Answer 1

Justify = center 应该可以解决你的问题

<Grid container className={classes.demo} justify="center" spacing={Number(spacing)}>