如何创建动态的响应式网格？

Question

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

我尝试了material-ui网格组件，但是无法证明孩子可以灵活启动，同时也将父容器居中。我可以证明内容中心的合理性，但是如果底行未满，这看起来很奇怪。

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)}>

Answer 2

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

Answer 3

Bootstrap很简单，可用于为支持台式机，移动设备和平板电脑的网站创建响应式布局。

您要查找的是卡片组，并根据您的样式创建卡片。这是Documentation，您可以使用嵌套网格布局获得所需的输出。