如何跨嵌套网格对齐项目（React Material UI）答案

【问题标题】：How to align items across nested Grid (React Material UI)如何跨嵌套网格对齐项目（React Material UI）
【发布时间】：2021-07-29 21:17:14
【问题描述】：

我现在正在使用 React Material UI Grid 组件来构建我的网页，但是我遇到了一个关于跨嵌套网格对齐项目的问题。现在的视图是这样的：

但我希望右半边的项目被拉伸以与底部的左半边对齐，理想情况下，它应该是这样的：

代码是这样的：

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';

const useStyles = makeStyles((theme) => ({

  paper: {
    padding: theme.spacing(1),
    textAlign: 'center',
    color: theme.palette.text.secondary,
  },
}));

export default function NestedGrid() {
  const classes = useStyles();

  function FormRow3() {
    return (
      <React.Fragment>
        <Grid item xs={4}>
          <Paper className={classes.paper}>item</Paper>
        </Grid>
        <Grid item xs={4}>
          <Paper className={classes.paper}>item</Paper>
        </Grid>
        <Grid item xs={4}>
          <Paper className={classes.paper}>item</Paper>
        </Grid>
      </React.Fragment>
    );
  }
  function FormRow2() {
    return (
      <React.Fragment>
        <Grid item xs={12}>
          <Paper className={classes.paper}>item</Paper>
        </Grid>
      </React.Fragment>
    );
  }

  return (
    <div >
      <Grid container spacing={1}>
        <Grid container item xs={6} spacing={3}>
          <FormRow3 />
          <FormRow3 />
        </Grid>
        <Grid container item xs={6} spacing={3}>
          <FormRow2 />
        </Grid>
      </Grid>
    </div>
  );
}

我这里还有一个沙盒：https://codesandbox.io/s/material-demo-forked-xunx7

谁能帮忙？

编辑：使用@nipuna777 answer(flex=1)，我可以对齐网格中的项目。但我发现如果更复杂的场景，像这样：

顶部、底部和右侧部分可能无法完美对齐。那么如何让所有这些边界完美对齐呢？？

上面的代码在这里： https://codesandbox.io/s/material-demo-forked-imrrh?file=/demo.js

【问题讨论】：

你试过把中间的Grid的spacing减到2吗？

标签： css reactjs material-ui grid

【解决方案1】：

一种可能的解决方案需要进行以下更改：

将container={true} 添加到 Grid 元素，以便它为子组件创建一个弹性容器。（在这种情况下，子组件将是 Paper。

<Grid item xs={12} container={true}>
  <Paper className={classes.paper}>item</Paper>
</Grid>

在classes.paper 定义中，添加flex: 1 以确保Paper 元素将占据容器中的全部空间。

paper: {
  flex: 1,
  padding: theme.spacing(1),
  textAlign: "center",
  color: theme.palette.text.secondary
}

您可以在此处查看一个工作示例：https://codesandbox.io/s/material-demo-forked-ud6um?file=/demo.js

【讨论】：

为什么我不能只使用<Grid container xs={12} > <Paper className={classes.paper}>item</Paper> </Grid>
在实际情况下，当我把 container={true} 的边距或内边距改变了，你知道为什么吗？

【解决方案2】：

如果您查看检查器，您会发现问题在于您设置了填充而不是高度。

<div class="MuiPaper-root makeStyles-paper-1 MuiPaper-elevation1 MuiPaper-rounded">
 item
</div>

您应该将padding: 8px; 替换为height: 100%;

所以你可以使用上面元素中的类来应用你的新样式。

【讨论】：

【解决方案3】：

你有没有试过把中间Grid的间距缩小到2，

return (
    <div>
      <Grid container spacing={1}>
        <Grid container item xs={6} spacing={3}>
          <FormRow1 />
          <FormRow3 />
        </Grid>
        <Grid container item xs={6} spacing={2}>
          <FormRow2 />
        </Grid>
        <Grid item xs={12} spacing={3}>
          <FormRow4 />
        </Grid>
      </Grid>
    </div>
  );

无法在 cmets 中发布这么多代码，因此发布作为答案。

【讨论】：