Material UI - Grid layout

#webdev

import {Grid} from '@mui/material'

// codes..

return (
  <Grid container>
    <Grid item xs={12} sm={6} lg={3}>
      <Card>1</Card>
    </Grid>
    <Grid item xs={12} sm={6} lg={3}>
      <Card>2</Card>
    </Grid>
    <Grid item xs={12} sm={6} lg={3}>
      <Card>3</Card>
    </Grid>
    <Grid item xs={12} sm={6} lg={3}>
      <Card>4</Card>
    </Grid>
  </Grid>
)

xs means

@media query(min-length: 0px) {
  // codes..
}

and This means apply CSS properties when width is up and 0px.
So, xs={12} means If width is >=0px then take 12 columns.

Grid layout basically 12 columns in MUI.
So, If each Grid item takes 12 columns then they will take all the columns one by one so they will be stacked.

You can see total 4 Grid items in the code.
If responsive breakpoint is up and lg then takes 3 columns.
So, each Grid item will take 3 columns.
It means all Grid items will be at a row.

MUI default breakpoints

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

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide