[MUI] 그리드

 

그리드

• 레이아웃 구성, 쉽게 만들 수 있는 기능 제공
• 일직선의 레이아웃 쉽게 구현 가능
• 기본적으로 가로 화면 12등분
• 반응형 디자인 지원

 

그리드 개념

• Container(컨테이너): 그리드 컴포넌트 감싸는 최상위 컨테이너. 그리드 레이아웃 구성하는 요소 감싸는 역할.
• item(아이템): 그리드 컨테이너 안에 표현되는 각각 아이템 요소. 그리드 시스템 내에서 정렬되고 배치될 수 있는 단위.

 

아이템 크기 배치 지정

• xs: 가장 작은 화면 크기에서 아이템의 크기와 배치 지정. 일반적으로 모바일 기기 기준
• sm: 작은 화면에 크기에서 아이템의 크기와 배치 지정. 일반적으로 태블릿 기기 기준
• md: 중간 화면 크기에서 아이템의 크기와 배치 지정.
• lg: 큰 화면 크기에서 아이템의 크기와 배치 지정. 일반적으로 데스크탑 화면을 기준
• xl: 가장 큰화면ㅇ 크기에서 아이템의 크기와 배치 지정. 일부 경우에만 사용.

12를 넘게 되면 알아서 개행(Carriage Return)

 

 

웹의 레이아웃 형태 예시

<Grid item xs={12} height={100}>
	<header/>
</Grid>

<Grid item xs={3} height={500}>
	<aside/>
</Grid>

<Grid item xs={9} height={500}>
	<article/>
</Grid>

<Grid item xs={12} height={100}>
	<footer/>
</Grid>

 

고정된 헤더 영역 구현    ->    AppBar라는 컴포넌트 사용