Grid Spacing Support more than 40px

[softmarshmallow]

Need support for Spacing more than 40px.

As referred in doc.

The responsive grid focuses on consistent spacing widths, rather than column width. Material design margins and columns follow an 8dp square baseline grid. Spacing can be 8, 16, 24, 32 or 40dp wide

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

8 px Rule is fine, but there are bunch alot of designs using more spacing than 40px.
64, 128 etc...

Current Behavior 😯

if not followed 8px rule, or over that. the spacing will be ignored and just be 0

[joshwooding]

@oliviertassinari I'm not sure how to handle this, whilst also thinking of your proposed change in #13663

Move away from hard-coded 8px public API. For instance, I think that the following API would be much better <Grid spacing={1|2|3} /> 👍. <Grid spacing={8|16|24} /> 👎.

[oliviertassinari]

@softmarshmallow This is already planned in #12925. I'm suggesting that we support 8 different grid values following what we do with the system package: https://material-ui.com/system/spacing/#transformation.

[eps1lon]

@oliviertassinari Where does this limit on 8 different spacings stem from? I would rather leave this to the user and simply add a recommendation to the docs if there are some resources that suggest spacing limits.

[oliviertassinari]

@eps1lon 8 is an arbitrary number. We have to stop somewhere if we are using a static style sheet. We could do 10 not to confound it with theme.spacing.unit = 8.

[eps1lon]

Oh now I get it: We're creating the rules statically i.e. at build time. Can't we leverage our new styling solution with dynamic styles?

[oliviertassinari]

@eps1lon We can try, otherwise, we can create a Grid generator.