mui - Grid

작동 원리

• 그리드는 항상 플렉스 아이템 → 플렉스 컨테이너 추가하려면 container props를 추가해야함
• 기본적으로 12개의 컬럼으로 구성됨
• 기본 그리드 중단점은 xs, sm, md, lg, xl

// 중단점 예시
<Grid size={{ xs: 6, sm: 4, md: 2 }}/>

xs:6 → 6/12 → 화면이 작을 때 2개씩 한 줄에
sm:4 → 4/12 → 화면이 조금 넓을 때 3개씩 한 줄
md:2 → 2/12 → 화면이 더 넓을 때 6개씩 한 줄

기본 그리드

• 그리드 레이아웃 그리려면 일단, container prop을 사용해서 그리드 항목을 감싸야함.

<Grid container spacing={2}>
  <Grid size={8}>
    <Item>size=8</Item>
  </Grid>
  <Grid size={4}>
    <Item>size=4</Item>
  </Grid>
  <Grid size={4}>
    <Item>size=4</Item>
  </Grid>
  <Grid size={8}>
    <Item>size=8</Item>
  </Grid>
</Grid>