Question

我正在开发React Web UI。我有3个部分，其中包含需要根据用户设备屏幕尺寸正确缩放的内容。我使用了Grid React容器，无法按照自己的意愿格式化布局。

我的3个部分的大小不同，因此，如果我的网格为2列宽，则第3个部分将从其他两端中最大的那部分开始。在本文结尾处，您将找到我现在所拥有的图片以及我想要拥有的图片。

现在，我试图查看所有可以解决我问题的React Grid属性，甚至重新格式化我的一些代码以使用div而不是React React Grid，但是我发现没有用。

基本上这是我使用的代码：

render() {
    const { classes } = this.props;
    return (
        <React.Fragment>
            <Grid container spacing={16}>
                <Grid item xs={12} md={6}>
                    <Section title={title1}>
                           CONTENT 1
                    </Section>
                    </Grid>

                    <Grid item xs={12} md={6}>
                        <Section title={title2}>
                            CONTENT 2
                        </Section>
                    </Grid>

                    <Grid item xs={12} md={6}>
                        <Section title={title3>
                            CONTENT 3
                        </Section>
                    </Grid>
                </Grid>
            </React.Fragment>
        );

这就是我得到的：Actual Grid Layout 这就是我想要的：Wanted Layout

无论如何，我可以使用React Grid容器获得我想要的布局吗？

我仍然是React新秀，谢谢！！

Answer 1

为什么不想使用CSS grid或flex-box。您可以使用CSS轻松完成此布局。

Here is complete guide to use css grid

Answer 2

也尝试一下。我不确定它是否能正常工作

  return (
  <React.Fragment>
    <Grid container spacing={16}>
      <Grid item xs={12} md={6}>
        <Grid item xs={12} md={6}>
          <Section title={title1}>
            CONTENT 1
          </Section>
        </Grid>
        <Grid item xs={12} md={6}>
          <Section title={title3}>
            CONTENT 3
          </Section>
        </Grid>
      </Grid>
    </Grid>

    <Grid item xs={12} md={6}>
      <Section title={title2}>
        CONTENT 2
      </Section>
    </Grid>
  </React.Fragment >
);

React Grid：如何制作一个网格项目来填充空白

2 个答案: