Material-ui: [Grid] Allow different values for x and y spacing

[cdietze]

• [x] This is a v1.x issue (v0.x is no longer maintained).
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Feature request

When using Grid's spacing attribute it affects equally vertical and horizontal spacing. It would be nice to be able to set them differently.

My use-case is that I use Grids to layout form elements. The TextFields already have the expected vertical spacing so I would like Grid to just provide the horizontal spacing.
I put up a demo showing the spacing in the form use-case: https://codesandbox.io/s/jnjon2oq5

My suggestion is to add another attribute like offSpacing (?) that when specified defines the gap size in off-direction (when direction is row this defines the y-spacing and vice versa). When this attribute is not given spacings are equal.

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | v1.0.0 |
| React | 16.4.0 |

[oliviertassinari]

This issue #7744 could be an answer to your problem.

[oliviertassinari]

Yes, I confirm. It's does that work for you?

[cdietze]

Works for my use-case, thanks!
I added a demo of the nested grids to my demo.

What this does not cover is when one Grid spans multiple rows. I think when writing a responsive form this would be useful.

[cdietze]

I added an example for responsive form elements to the demo.
Here the nested Grid solution does not work because the row count changes responsively.
Another advantage of having an "offSpacing" attribute would be to have less nesting.

[oliviertassinari]

@cdietze Yes, this is exactly what I was suggesting :). I'm moving the discussion to #7744.

[cdietze]

Hm? So what are you suggesting?

7744 is about documenting the ability to use container+item at the same time.

The point of the responsive demo was to show a use-case where different horizontal and vertical gaps are useful but cannot be solved by nesting Grids.

[oliviertassinari]

How is this demo not working?

      <h2>Nested Grids:</h2>
      <Grid container spacing={8}>
        <Grid item container spacing={16}>
          <FormRow />
        </Grid>
        <Grid item container spacing={16}>
          <FormRow />
        </Grid>
        <Grid item container spacing={16}>
          <FormRow />
        </Grid>
      </Grid>

[oliviertassinari]

The point of the responsive demo was to show a use-case where different horizontal and vertical gaps are useful but cannot be solved by nesting Grids.

@cdietze For the "Responsive Form with spacing 16:" demo, you can get away by using a single spacing and the textfield margin property.

[cdietze]

@oliviertassinari
Yes - for the "Nested Grid" demo it's working fine.

For the "Responsive Form with spacing 16" demo - hm, adjusting the textfield's margin looks ok in that case. But it really feels like the wrong thing to adjust. Suppose, you wanted the horizonal textfield gaps to be 32 - that's too much to compensate by reducing the textfield margins.

[kylane]

I've also just come across this problem with developing some prototypes for a very very... very... long form (luckily for expert users) who would prefer the forms vertical spacing to be absolutely minimised, but having multiple inputs on a row still space apart visually... I could potentialls space them with another item - but would add to the coding overhead.

Ability to set spacing={x} or spacingRow={x} and spacingColumn={y} on a container would be great.