如何在 ReactJs Material UI Grid 中具有不同的水平和垂直间距

Question

在 Material UI Grid 中，为了垂直间隔 Grid Item，我在 Grid Container 中提供了间距。它在大屏幕上看起来不错，但在移动设备上，它会导致网格项目之间的水平间距尴尬。

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

如何在网格中具有不同的垂直和水平间距？

Answer 1

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

现场演示

Answer 2

您必须了解网格在内部是如何工作的。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”。这种方法可能看起来冗长而多余，但它使您可以自由地在未来的布局中添加更多特定于移动设备的更改。

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