Material UI responsive grid direction

Question

I want the container direction as "row" above md size screen and "column" below md size screen? How can I implement it?

<Grid container direction = "row"(in large screens)/direction = "column"(in small screens)>

I tried something this.

<Grid container classes={gridDirection}>

 gridDirection: {
    direction = "row",
    [theme.breakpoints.down('md')]: {
      direction = "column",
    },
  }

but it is not working probably because "direction" is a react prop and not a CSS style. Is there a way to access these react props inside stylesheet file?

Answer 1

The easiest way and I believe the modern way is to use the sx attribute. Then let MUI handle the breakpoints for you. These are the default MUI breakpoints as of writing.

xs = extra-small: 0px
sm = small: 600px
md = medium: 900px
lg = large: 1200px
xl = extra-large: 1536px

xs and sm are generally considered to be mobile/small tablet. MUI is mobile first, so xs will be set and not overwritten until the size is md or larger in my example below.

<Grid container sx={{ flexDirection: { xs: "column", md: "row"} }}>

</Grid>

Answer 2

in MUI v5 you can do it like below:

<Grid container direction={{xs: "column", md: "row"}}>

</Grid>