如何创建一个动态的、响应式的网格？答案

【问题标题】：How to create a dynamic, responsive grid?如何创建一个动态的、响应式的网格？
【发布时间】：2019-08-20 05:07:54
【问题描述】：

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

我已经尝试过 material-ui 网格组件，但无法证明孩子们在使父容器居中的同时进行 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>
    );
  }
}

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

这是输出：

如果有其他方法可以创建响应式电影网格，请告诉我。

【问题讨论】：

您要使用引导卡片组吗？
@Sam。查看文档，但我找不到任何使它们响应的东西。你有我可以找到一些信息的链接吗？
w3schools.com/bootstrap/bootstrap_get_started.asp bootstrap 用于为移动、桌面和标签创建响应式设计。它会自动调整。请参阅 Bootstrap 卡片演示 getbootstrap.com/docs/4.0/components/card 中的卡片演示示例并确定它是否是您想要的（在卡片组和卡片组部分）
是的，很抱歉我有一段时间没有使用引导程序了。我现在就去看看。谢谢你
谢谢你在阅读并玩了之后，我已经让它完全按照我想要的方式工作了。如果您想将此作为答案发布，我会将其标记为正确:)

标签： html css reactjs jsx

【解决方案1】：

Bootstrap 简单易用，可用于为支持桌面、移动设备和平板电脑的 Web 创建响应式布局..

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

【讨论】：

【解决方案2】：

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

【讨论】：

我在原始帖子中确实提到，如果我这样做并且没有足够的项目来填充最后一行，它会看起来很奇怪。

【解决方案3】：

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

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

【讨论】：

我在原始帖子中确实提到，如果我这样做并且没有足够的项目来填充最后一行，它会看起来很奇怪。
您可以限制连续的卡片。如果您的卡片数量很多，只需计算一行中必须有多少张卡片才能很好地分布
@sClarkeOG 你可能想看看here...这可能无法使用 flexboxes 解决...