How to have different horizontal and vertical spacing in MUI Grid?

Question

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>

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

Answer 1

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.

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

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.