如何使用Grid组件实现不同容器内对应行元素的对齐

问题根源 #

你当前使用了两个独立的Grid container容器，两个容器的列宽各自根据内容自适应，且第一行只有2列、第二行有3列，布局规则不统一，因此无法实现对应列对齐。

解决方案 #

将所有字段放到同一个Grid container中，基于12栅格规则给每个字段列设置统一的宽度占比，即可实现对齐。你第二行需要3个等宽列，给每个列设置xs={4}（12栅格除以3列等于4），第一行的前两个列也设置同样的xs={4}，即可让第二行的Email列和第一行的N° de ticket列完全对齐。

修改后代码参考：

<Grid
  container
  direction="row"
  justifyContent="flex-start"
  alignItems="stretch"
  style={{ padding: "1.5em" }}
  spacing={2} // 可选配置，用于控制列之间的间距
>
  {/* 第一行：ID */}
  <Grid item xs={4}>
    <div>
      <span>ID</span>
      <p style={{ color: "gray" }}>{props._id}</p>
    </div>
  </Grid>
  {/* 第一行：N° de ticket */}
  <Grid item xs={4}>
    <div>
      <span>N° de ticket</span>
      <p style={{ color: "gray" }}>{props._id}</p>
    </div>
  </Grid>
  {/* 第一行占位，对应第二行第三列的位置 */}
  <Grid item xs={4}></Grid>

  {/* 第二行：出生日期 */}
  <Grid item xs={4}>
    <div>
      <span>Fecha de nacimiento</span>
      <p style={{ color: "gray" }}>{props.birthdate}</p>
    </div>
  </Grid>
  {/* 第二行：Email，和上方N° de ticket列宽度一致，自动对齐 */}
  <Grid item xs={4}>
    <div>
      <span>Email</span>
      <p style={{ color: "gray" }}>{props.email}</p>
    </div>
  </Grid>
  {/* 第二行：电话 */}
  <Grid item xs={4}>
    <div>
      <span>Teléfono</span>
      <p style={{ color: "gray" }}>{props.phone}</p>
    </div>
  </Grid>
</Grid>

如果你的布局不需要第一行右侧留空，也可以自行调整栅格数值，只要保证需要对齐的上下列栅格数值一致即可。

内容的提问来源于stack exchange，提问作者SantGT5