如何在 MUI Grid 中有不同的水平和垂直间距?

2022-01-18 00:00:00 reactjs grid css material-ui

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

In MUI Grid, to space Grid Item vertically, I provided spacing in Grid Container. It looks good on big screens but on mobile, it results in awkward horizontal spacing between Grid Items.

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

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

How can I have different vertical and horizontal spacing in Grid?

推荐答案

你必须了解网格内部是如何工作的.Material UI Grid 布局基于 flexbox 模型.因此，在 Grid 上设置容器属性，设置display flex"；在上面.现在这个 flex box 中的项目可以水平或垂直流动，因此可以给定水平间距或给定垂直间距，但不能同时给定两者.

You must understand how grid works internally. Material UI Grid layout is based on the flexbox model. So, setting container attribute on Grid, sets "display flex" on it. Now items in this flex box can either flow horizontally or vertically, thus either horizontal spacing can be given or vertical spacing can be given but not both.

如果您设置方向"；归属于列"；如图所示在网格上:

If you set "direction" attribute to "column" on Grid as shown:

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

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

Then spacing provided will act as vertical spacing between the items and items will be arranged vertically.

现在如果项目需要水平排列，那么上面的代码将如下所示:

Now If items are required to arrange horizontally then above code will be changed as shown:

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

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

Here, in this implementation spacing will act as horizontal spacing. Also, this is the default implementation if in case you not specify "direction" attribute.

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

Now to switch between 2 layouts in mobile and desktop, we can do it as:

使用设置显示"的媒体查询实现一个 css 类.为无"用于移动类型设备和初始"适用于桌面型设备.我们将其命名为display-lg".并以类似的方式，使类display-sm"；在移动设备上显示元素并将其隐藏在桌面上.应用display-lg"在要在桌面和display-sm"上显示的网格布局上；在要在移动设备上显示的网格布局上.这种方法可能看起来冗长且多余，但它让您可以自由地在未来的布局中添加更多针对移动设备的更改.

Implement a css class using media query that set "display" to "none" for mobile type device and "initial" for desktop type device. Let's name it "display-lg". And in similar way, make class "display-sm" that show element on mobile and hide it on desktop. Apply "display-lg" on grid layout that is to be shown on desktop and "display-sm" on grid layout that is to be shown on mobile. This approach may seems you long and redundant but it provides you liberty to add more mobile specific changes in your layout in future.

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

Please feel free to comment if you need more clarity on answer.

相关文章