您必须了解网格在内部是如何工作的。Material UI Grid 布局基于 flexbox 模型。因此，在 Grid 上设置容器属性，在其上设置“显示弹性”。现在这个 flex box 中的项目可以水平或垂直流动，因此可以给定水平间距或给定垂直间距，但不能同时给定。

如果在网格上将“方向”属性设置为“列”，如下所示：

<Grid container direction={'column'} spacing={24}>
    <Grid item xl={6} md={6} sm={12} xs={12}>
        <TextField
        required
        id="outlined-email-input"
        label="Customer Name"
        name="email"
        fullWidth
        />
    </Grid>
    <Grid item xl={6} md={6} sm={12} xs={12}>
        <TextField
        required
        id="outlined-email-input"
        label="Customer Name"
        name="email"
        fullWidth
        />
    </Grid>
</Grid>

然后提供的间距将作为项目之间的垂直间距，项目将垂直排列。

现在，如果项目需要水平排列，则上面的代码将更改为如下所示：

<Grid container direction={'row'} spacing={24}>
    <Grid item xl={6} md={6} sm={12} xs={12}>
        <TextField
        required
        id="outlined-email-input"
        label="Customer Name"
        name="email"
        fullWidth
        />
    </Grid>
    <Grid item xl={6} md={6} sm={12} xs={12}>
        <TextField
        required
        id="outlined-email-input"
        label="Customer Name"
        name="email"
        fullWidth
        />
    </Grid>
</Grid>

在这里，在这个实现中，间距将作为水平间距。此外，如果您未指定“方向”属性，则这是默认实现。

现在要在移动设备和桌面设备的 2 种布局之间切换，我们可以这样做：

使用媒体查询实现一个 css 类，将移动类型设备的“display”设置为“none”，桌面类型设备设置为“initial”。我们将其命名为“display-lg”。并以类似的方式，制作在移动设备上显示元素并将其隐藏在桌面上的类“display-sm”。在要在桌面上显示的网格布局上应用“display-lg”，在要在移动设备上显示的网格布局上应用“display-sm”。这种方法可能看起来冗长而多余，但它使您可以自由地在未来在布局中添加更多特定于移动设备的更改。

如果您需要更明确的答案，请随时发表评论。

这在MUI v5 中是可能的，只需使用rowSpacingandcolumnSpacing代替spacing。从文档中查看此示例：

<Grid container rowSpacing={1} columnSpacing={3}>
  <Grid item xs={6}>
    <Item>1</Item>
  </Grid>
  <Grid item xs={6}>
    <Item>2</Item>
  </Grid>
  <Grid item xs={6}>
    <Item>3</Item>
  </Grid>
  <Grid item xs={6}>
    <Item>4</Item>
  </Grid>
</Grid>

现场演示

是的，我想知道同样的事情，文档暗示 Grid 基于 12 个“列”布局。因此，当您想要在两个组件之间水平拆分 75/25 时，就像 xs={8} 和另一个设置为 xs={4} 一样简单。

我认为 OP 是在问如何做同样的事情，但垂直。我也在寻找解决方案，但我相信该方法不在 Grid 组件中。将尝试使用额外的 CSS 来解决我遇到的问题。

编辑：是的，看起来在组件本身内没有办法做到这一点。从文档

定义组件将用于给定断点（xs、sm、md、lg 和 xl）的网格数的属性侧重于控制宽度，并且对列和列反向容器内的高度没有类似的影响。如果在 column 或 column-reverse 容器中使用，这些属性可能会对 Grid 元素的宽度产生不良影响。