グリッドのレイアウト

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 手段

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

そして、これはCSSプロパティwidth は最大で0 pxです.
それでxs={12} 幅が>=0px その後12 columns .
グリッドレイアウトの基本的には12の列をmui.
だから、各グリッドの項目は12列を取る場合、彼らはスタックされるように1つずつすべての列を取るでしょう.
コードの合計4グリッド項目を見ることができます.
応答ブレークポイントが上がっているならばlg その後3列かかります.
したがって、各グリッドの項目は3列を取る.
すべてのグリッド項目が1行になることを意味します.
デフォルトブレークポイント

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