反应网格:如何制作网格项来填充空白空间

Question

我正在开发一个 React web UI。 我有 3 个部分包含需要根据用户设备屏幕尺寸正确缩放的内容。 我使用 Grid React 容器，无法按照我想要的方式格式化布局。

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

现在，我尝试查看所有可以解决我问题的 React Grid 属性，甚至重新格式化我的一些代码以使用div 而不是使用 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>
);

这就是我得到的：实际网格布局 这就是我想要的：想要的布局

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

我还是反应菜鸟，提前感谢！

Answer 1

为什么你不想使用 cssgrid或flex-box.您可以使用 css 轻松完成此布局。

这是使用css网格的完整指南

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