你必须了解网格内部是如何工作的。Material UI Grid布局基于flexbox模型。因此，在Grid上设置容器属性，将在其上设置“display flex”。现在这个灵活框中的项目可以水平或垂直流动，因此可以给出水平间距或垂直间距，但不能同时给出两者。
如果您将“方向”属性设置为网格上的“列”，如图所示：

<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>

这里，在该实施方式中，间隔将充当水平间隔。此外，如果您没有指定“direction”属性，这也是默认实现。
现在要在移动的和桌面中的2个布局之间切换，我们可以这样做：
使用媒体查询实现一个css类，将移动的设备的“display”设置为“none”，桌面设备的“initial”设置为“initial”。我们将其命名为“display-lg”。以类似的方式，创建类“display-sm”，在移动的上显示元素，在桌面上隐藏元素。在桌面上显示的网格布局上应用“display-lg”，在移动的上显示的网格布局上应用“display-sm”。这种方法可能看起来冗长而多余，但它为您提供了在未来的布局中添加更多移动的特定更改的自由。
如果您需要更清晰的答案，请随时发表评论。

在MUI v5中可以实现，只需使用rowSpacing和columnSpacing，而不是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>

现场演示

是的，我想知道同样的事情，文档暗示网格是基于12“列”布局。因此，当您想要在两个组件之间水平分割75/25时，只需将xs={8}设置为另一个xs={4}。
我认为OP是在问如何垂直地做同样的事情。我也在寻找一个解决方案，但我相信该方法不在于网格组件。我会尝试使用额外的CSS来解决这个问题。
编辑：是的，看起来在组件本身中没有办法做到这一点。从文档中
定义组件将用于给定断点的网格数的属性（xs、sm、md、lg和xl）主要用于控制宽度，对列和列反转容器中的高度没有类似的影响。如果在列或列反向容器中使用，这些属性可能会对Grid元素的宽度产生不良影响。

组件有一个名为gap的属性，可以将字符串作为值传递，类似于CSS Grid和CSS FlexBox。

<Grid gap="20px 50px">
   //Grid items...
</Grid>