Skip to content

[Grid] Allow different values for x and y spacing #11764

Description

@cdietze
  • 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    component: GridThe React component.good first issueGreat for first contributions. Enable to learn the contribution process.type: new featureExpand the scope of the product to solve a new problem.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions