How to have different horizontal and vertical spacing in Material UI Grid?

Question

In Material UI, 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

The components have a attribute called gap, you can pass a string as value, similar to the CSS Grid and CSS FlexBox.

<Grid gap="20px 50px">
   //Grid items...
</Grid>

Answer 2

This is possible in MUI v5, simply use rowSpacing and columnSpacing instead of spacing. See this example from the docs:

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

Live Demo

Answer 3

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.

Answer 4

Yeah I am wondering the same thing, the docs imply that Grid is based on a 12 "column" layout. So when you want a 75/25 split horizontally between two components its as easy as xs={8} and the other set at xs={4}.

I think OP is asking how to do the same thing but vertically. I too am searching for a solution, but I believe the method does not lie within the Grid component. Will try to use additional CSS to solve the issue I have.

EDIT: Yup, looks like there is no way to do this within the component itself. From the documentation

The properties which define the number of grids the component will use for a given breakpoint (xs, sm, md, lg, and xl) are focused on controlling width and do not have similar effects on height within column and column-reverse containers. If used within column or column-reverse containers, these properties may have undesirable effects on the width of the Grid elements.