Question

在“材质UI网格”中，为了垂直间隔Grid Item，我在Grid Container中提供了间距。在大屏幕上看起来不错，但在移动设备上，网格项目之间的水平间距却很尴尬。

CaptureGroupTransformer

如何在Grid中设置不同的垂直和水平间距？

Answer 1

您必须了解网格在内部如何工作。材质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>

在此，间距将充当水平间距。另外，如果您未指定“ direction”属性，则这是默认实现。

现在可以在移动设备和台式机的两种布局之间进行切换，我们可以按照以下方式进行操作：

使用媒体查询实现CSS类，该查询将移动类型设备的“显示”设置为“无”，将桌面类型设备的“初始”设置为“初始”。我们将其命名为“ display-lg”。并以类似的方式，使类“ display-sm”在手机上显示元素并将其隐藏在桌面上。在要在桌面上显示的网格布局上应用“ display-lg”，在要在移动设备上显示的网格布局上应用“ display-sm”。这种方法似乎冗长而冗长，但可以为您提供自由，以便将来在布局中添加更多针对移动设备的更改。

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

Answer 2

是的，我想知道同样的事情，文档暗示网格基于12个“列”布局。因此，当您希望在两个组件之间水平分割75/25时，它就像xs = {8}一样容易，而另一个设置为xs = {4}。

我认为OP正在询问如何垂直进行相同的操作。我也正在寻找解决方案，但我相信该方法并不位于Grid组件内。将尝试使用其他CSS解决我遇到的问题。

编辑：是的，看起来组件内部本身无法执行此操作。从documentation

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

如何在ReactJs材质UI网格中具有不同的水平和垂直间距

2 个答案: