您必须了解网格内部是如何工作的。 Material UI 网格布局基于 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>
这里，在此实现中，间距将充当水平间距。此外，如果您未指定“方向”属性，这也是默认实现。
现在要在移动设备和桌面设备的两种布局之间切换，我们可以这样做：
使用媒体查询实现 css 类，将移动类型设备的“display”设置为“none”，将桌面类型设备设置为“initial”。我们将其命名为“display-lg”。并以类似的方式，创建类“display-sm”，在移动设备上显示元素并在桌面上隐藏它。在要在桌面上显示的网格布局上应用“display-lg”，在要在移动设备上显示的网格布局上应用“display-sm”。
这种方法可能看起来又长又多余，但它使您可以自由地在未来的布局中添加更多特定于移动设备的更改。
如果您需要更清晰的答案，请随时发表评论。
