[MUI] <Grid> 사용 방법

<Grid> 컴포넌트

• MUI에서 반응형 레이아웃을 제공하는 컴포넌트로 유연성이 높다.
• 레이아웃에는 container와 item 두 가지 유형이 있다.
• <Grid container>가 최대 12까지 너비라고 생각하고 <Grid item>의 너비를 정해주면 된다
• breakpoint은 xs, sm, md, lg, xl 5가지가 있다.

  breakpoints (MUI 공식문서)
  xs : extra-small (스크린(브라우저) 너비가 0~600px일 때 사용)
  sm : small (600 ~ 900px)
  md : medium (900 ~ 1200px)
  lg : large (1200 ~ 1536px)
  xl : extra-large (1536px ~ )

이렇게 breakpoint를 지정하면 브라우저 크기 조정할 때 각 너비에 따라 컴포넌트의 크기가 변한다.
createThem을 이용해 breakpoint 별로 커스텀도 가능하다.

<Grid container>

옵션

• direction : row, column 으로 지정할 수 있는 옵션
  (참고로, direction=colum인 경우 breakpoint는 지원되지 않는다고 한다.)

내용 계속 추가 예정

<Grid> 공식문서