Material-ui: [Grid] Support responsive spacing prop

[scruffian]

The Material docs allow for Grids to have different gutters at different breakpoints:

https://material.io/design/layout/responsive-layout-grid.html#grid-customization

From what I can see this isn't available in Material UI. Is that deliberate, or would you support a PR that added this feature? Or maybe it's there already and I didn't see it...

[pavel06081991]

It would be great to have this feature

[AlfredoGJ]

Hello guys. I see no one is working on this issue, so I will give it a try.

[rnanania]

Just FYI one workaround I have been using for this issue until we get this feature.

import {  useTheme } from '@material-ui/styles';

const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down('xs'), {
  defaultMatches: true
});

<Grid container spacing={isMobile ? 0 : 4}>
</Grid>

[oliviertassinari]

Closing for #6140.

[sirajalam049]

After spotting an issue on google search console, I found that using

const isMobile = useMediaQuery(theme.breakpoints.down('xs'), {
  defaultMatches: true
});

is not a good idea. It shifts the content a little after loading as the width of the window calculation causes the component to re-render and shift the layout a bit, which should not happen.

Read this.

My 40+ pages showing a warning in desktop and error on mobile in core web vitals. This should be done by media query css.

@oliviertassinari , please suggest a better solution.

Similar thing I noticed in chips. I change the size of the chip as

<Chip size={isMobile ? 'small': undefined />

that also causing content layout shifts. Props with breakpoint information would be a good idea for that. But there should be a work around for this.

[oliviertassinari]

@sirajalam049 Agree, CSS media query should be preferred, especially for layouting

[ErikParso]

So there is no plain css solution for this.

Except you do it yourself using css media query and for each breakpoint you set negative margin for container and positive padding of same value for grid item. Do not forget to set container width to unset because flex...