[Grid] Allow different values for x and y spacing

• This is a v1.x issue (v0.x is no longer maintained).
• 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

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

[oliviertassinari]

Actually, we could already implement this today. It should be easy.

diff --git a/packages/material-ui/src/Grid/Grid.js b/packages/material-ui/src/Grid/Grid.js
index e87d15e940..c0c97f4d43 100644
--- a/packages/material-ui/src/Grid/Grid.js
+++ b/packages/material-ui/src/Grid/Grid.js
@@ -50,8 +50,8 @@ function generateGrid(globalStyles, theme, breakpoint, styleProps) {
     const width = `${Math.round((size / 12) * 10e7) / 10e5}%`;
     let more = {};

-    if (styleProps.container && styleProps.item && styleProps.spacing !== 0) {
-      const themeSpacing = theme.spacing(styleProps.spacing);
+    if (styleProps.container && styleProps.item && styleProps.columnSpacing !== 0) {
+      const themeSpacing = theme.spacing(styleProps.columnSpacing);
       if (themeSpacing !== '0px') {
         const fullWidth = `calc(${width} + ${getOffset(themeSpacing)})`;
         more = {
@@ -79,20 +79,39 @@ function generateGrid(globalStyles, theme, breakpoint, styleProps) {
   }
 }

-function generateGap({ theme, styleProps }) {
-  const { container, spacing } = styleProps;
+function generateRowGap({ theme, styleProps }) {
+  const { container, rowSpacing } = styleProps;
   let styles = {};

-  if (container && spacing !== 0) {
-    const themeSpacing = theme.spacing(spacing);
+  if (container && rowSpacing !== 0) {
+    const themeSpacing = theme.spacing(rowSpacing);

     if (themeSpacing !== '0px') {
       styles = {
         width: `calc(100% + ${getOffset(themeSpacing)})`,
         marginTop: `-${getOffset(themeSpacing)}`,
-        marginLeft: `-${getOffset(themeSpacing)}`,
         [`& > .${gridClasses.item}`]: {
           paddingTop: getOffset(themeSpacing),
+        },
+      };
+    }
+  }
+
+  return styles;
+}
+
+function generateColumnGap({ theme, styleProps }) {
+  const { container, columnSpacing } = styleProps;
+  let styles = {};
+
+  if (container && columnSpacing !== 0) {
+    const themeSpacing = theme.spacing(columnSpacing);
+
+    if (themeSpacing !== '0px') {
+      styles = {
+        width: `calc(100% + ${getOffset(themeSpacing)})`,
+        marginLeft: `-${getOffset(themeSpacing)}`,
+        [`& > .${gridClasses.item}`]: {
           paddingLeft: getOffset(themeSpacing),
         },
       };
@@ -181,7 +200,8 @@ const GridRoot = experimentalStyled(
       flexWrap: 'wrap-reverse',
     }),
   }),
-  generateGap,
+  generateRowGap,
+  generateColumnGap,
   ({ theme, styleProps }) =>
     theme.breakpoints.keys.reduce((globalStyles, breakpoint) => {
       // Use side effect over immutability for better performance.
@@ -239,6 +259,8 @@ const Grid = React.forwardRef(function Grid(inProps, ref) {
     md = false,
     sm = false,
     spacing = 0,
+    rowSpacing: rowSpacingProp,
+    columnSpacing: columnSpacingProp,
     wrap = 'wrap',
     xl = false,
     xs = false,
@@ -246,6 +268,9 @@ const Grid = React.forwardRef(function Grid(inProps, ref) {
     ...other
   } = props;

+  const rowSpacing = rowSpacingProp || spacing;
+  const columnSpacing = columnSpacingProp || spacing;
+
   const styleProps = {
     ...props,
     container,
@@ -254,7 +279,8 @@ const Grid = React.forwardRef(function Grid(inProps, ref) {
     lg,
     md,
     sm,
-    spacing,
+    rowSpacing,
+    columnSpacing,
     wrap,
     xl,
     xs,

import * as React from 'react';
import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';

export default function SpacingGrid() {
  return (
    <Grid container rowSpacing={1} columnSpacing={4}>
      {[0, 1, 2, 3, 4, 5].map((value) => (
        <Grid key={value} item xs={4}>
          <Paper sx={{ height: 140, bgcolor: 'grey.500', width: 1 }} />
        </Grid>
      ))}
    </Grid>
  );
}