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?

score 16 · Answer 1 · edited Nov 21 '20 at 18:54

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.

Material UI `` applies the spacing both horizontally and vertically. `direction` has nothing to do with the `space`. — Sam R., Apr 29 '20 at 18:40
`` does not exist do you mean `` ? According to my tests, `space` only applies vertically regardless of `direction` but I can be missing something — Ernest Jones, Nov 30 '20 at 15:39
On a wrap around the spacing seems to apply vertically as well — Oded Ben Dov, Jan 11 '21 at 07:33
Adding spacing to a grid with direction="row" adds padding-top and padding bottom to all children, thus creating vertical spacing as well. — Keith Murgic, Jul 26 '21 at 16:39

score 16 · Answer 2 · answered Sep 18 '21 at 11:02

16

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

answered Sep 18 '21 at 11:02

NearHuscarl

66,950
18
261
230

This is the answer. Confusingly, row spacing does not increase space between items in a row, it increases spaces between literal rows in the grid (so vertical spacing) – chrismarx Jan 26 '23 at 14:05

7FigureSwagger · Answer 3 · 2020-08-12T20:27:48.563

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.

score 1 · Answer 4 · answered Jul 12 '22 at 23:37

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>

answered Jul 12 '22 at 23:37

Adrian Roberto Aguilar Sandic

133
1
4

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

4 Answers4

Live Demo

Linked