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
Top comments (0)