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