React Material UI Grid 为具有不同项目数量的容器水平对齐项目

Question

我正在使用 React Material UI Grid System 来对齐我在内部使用 flexbox 的页面上的元素。

一切正常，但当容器包含不同数量的项目时，我无法弄清楚如何水平对齐项目。

在以下示例中，我有 2 个容器项，每个项的宽度为 6。 第一个包含项目x1和x2 ，第二个容器包含项目y1 、 y2和y3 。 如您所见，它现在的样子有点奇怪。 我希望x1与y1水平对齐， x2和y2 。

我将x1 , x2放在第一个容器中，将y1 , y2 , y3放在第二个容器中的原因是因为它们在语义上属于一起。 因此，我可以给外部容器不同的xs 、 sm 、 md 、 lg 、 xl值，如果它遇到断点，它们仍然会以正确的顺序显示。

但是，如果我只是将它们分成 3 行，每行 2 列，它们将按照x1 、 y1 、 x2 、 y2的顺序断开……这显然是不对的。

因此，我的问题是，如何水平对齐它们？

编辑：

这是它现在的样子：

这是它想要的样子：

Answer 1

我们想向<Grid>添加道具以使其成为可能。

1. alignItems="flex-start"将允许网格项目粘在顶部然后落到底部。
2. 从某种意义上说， direction="column"将改变项目如何“堆叠”的流程。 这将改变容器和它所连接的项目的大小，所以期望一些xs={12}变成xs={6} ，反之亦然。

这是下面的示例代码以及它通过沙箱的实现。

import "./styles.css";
import { Grid } from "@material-ui/core";

export default function App() {
  return (
    <div className="App">
      <Grid alignItems="flex-start" container spacing={1}>
        <Grid container direction="column" item xs={6} spacing={1}>
          <Grid item xs={12} style={{ border: "1px solid black" }}>
            x1
          </Grid>
          <Grid item xs={12} style={{ border: "1px solid black" }}>
            x2
          </Grid>
        </Grid>
        <Grid container direction="column" item xs={6} spacing={1}>
          <Grid item xs={12} style={{ border: "1px solid black" }}>
            y1
          </Grid>
          <Grid item xs={12} style={{ border: "1px solid black" }}>
            y2
          </Grid>
          <Grid item xs={12} style={{ border: "1px solid black" }}>
            y3
          </Grid>
        </Grid>
      </Grid>
    </div>
  );
}