재료 UI - 그리드 레이아웃

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..
}

이것은 width가 up이고 0px일 때 CSS 속성을 적용한다는 것을 의미합니다.
따라서 xs={12}는 너비가 >=0px인 경우 12 columns를 의미합니다.

그리드 레이아웃은 기본적으로 MUI에서 12열입니다.
따라서 각 Grid 항목이 12개의 열을 차지하면 모든 열을 하나씩 가져와서 쌓일 것입니다.

코드에서 총 4개의 Grid 항목을 볼 수 있습니다.
반응형 중단점이 작동하고 lg 3열을 사용하는 경우.
따라서 각 그리드 항목은 3개의 열을 사용합니다.
이는 모든 Grid 항목이 한 행에 있음을 의미합니다.

MUI 기본 중단점

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