Grid 레이아웃
Grid 레이아웃
Grid 레이아웃은 콘텐츠를 고정된 12컬럼 그리드 위에 배치해 주는 레이아웃이에요. 각 grid 항목의 span 값을 조정해 다양한 섹션 크기 조합을 만들 수 있어요.
출처: 문서
본문
예시 (Examples)
기본 (Basic)
span = 8span = 4, rowSpan = 2span = 2, rowSpan = 3span = 2span = 4span = 2span = 2span = 2span = 4span = 2span = 4span = 4
거터 포함 (With gutters)
span = 8span = 4, rowSpan = 2span = 2, rowSpan = 3span = 2span = 4span = 2span = 2span = 2span = 4span = 2span = 4span = 4
재정의 포함 (With overrides)
span = 3, rowSpan = 2
정렬 (Ordering)
표준 정렬 (Standard ordering)
- Item A
- Item B
- Item C
반응형 정렬 (Responsive ordering)
- Item A
- Item B
- Item C
그룹 정렬 (Grouped ordering)
- Set 1, Item A
- Set 1, Item B
- Set 1, Item C
- Set 1, Item D
- Set 2, Item A
- Set 2, Item B
- Set 2, Item C
- Set 2, Item D
대체 컴포넌트 (Alternative components)
- Grid item
- Grid item
- Grid item
- Grid item
- Grid item
Props
Grid
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | null | Grid 레이아웃 안에 렌더링되는 콘텐츠 |
| className | string | '' | Grid 레이아웃에 추가되는 추가 클래스 |
| component | React.ElementType<any> | React.ComponentType<any> | 'div' | 렌더링할 기본 컴포넌트를 설정합니다. 기본값은 div |
| hasGutter | boolean | 자식 사이에 공간을 추가합니다. | |
| lg | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 모든 grid 항목이 대형(large) 기기에서 가로질러야 하는 컬럼 수 | |
| md | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 모든 grid 항목이 중형(medium) 기기에서 가로질러야 하는 컬럼 수 | |
| order | { default?: string; md?: string; lg?: string; xl?: string; '2xl'?: string; } | flex 레이아웃 요소의 order 속성을 수정합니다 | |
| sm | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 모든 grid 항목이 소형(small) 기기에서 가로질러야 하는 컬럼 수 | |
| span | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | null | 그리드에서 컬럼이 가로질러야 하는 행 수입니다. 값은 1-12 사이의 숫자여야 합니다 |
| xl | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 모든 grid 항목이 대형(xLarge) 기기에서 가로질러야 하는 컬럼 수 | |
| xl2 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 모든 grid 항목이 초대형(2xLarge) 기기에서 가로질러야 하는 컬럼 수 |
GridItem
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | null | Grid Layout Item 안에 렌더링되는 콘텐츠 |
| className | string | '' | Grid Layout Item에 추가되는 추가 클래스 |
| component | React.ElementType<any> | React.ComponentType<any> | 'div' | 렌더링할 기본 컴포넌트를 설정합니다. 기본값은 div |
| lg | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | grid 항목이 대형 기기에서 가로지르는 컬럼 수. 값은 1-12 사이의 숫자여야 합니다 | |
| lgOffset | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | grid 항목이 대형 기기에서 오프셋되는 컬럼 수. 값은 1-12 사이의 숫자여야 합니다 | |
| lgRowSpan | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | grid 항목이 대형 기기에서 가로지르는 행 수. 값은 1-12 사이의 숫자여야 합니다 | |
| md | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | grid 항목이 중형 기기에서 가로지르는 컬럼 수. 값은 1-12 사이의 숫자여야 합니다 | |
| mdOffset | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | grid 항목이 중형 기기에서 오프셋되는 컬럼 수. 값은 1-12 사이의 숫자여야 합니다 | |
| mdRowSpan | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | grid 항목이 중형 기기에서 가로지르는 행 수. 값은 1-12 사이의 숫자여야 합니다 | |
| offset | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | null | grid 항목이 오프셋되는 컬럼 수 |
| order | { default?: string; md?: string; lg?: string; xl?: string; '2xl'?: string; } | flex 레이아웃 요소의 order 속성을 수정합니다 | |
| rowSpan | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | null | grid 항목이 가로지르는 행 수. 값은 1-12 사이의 숫자여야 합니다 |
| sm | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | grid 항목이 소형 기기에서 가로지르는 컬럼 수. 값은 1-12 사이의 숫자여야 합니다 | |
| smOffset | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | grid 항목이 소형 기기에서 오프셋되는 컬럼 수. 값은 1-12 사이의 숫자여야 합니다 | |
| smRowSpan | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | grid 항목이 중형 기기에서 가로지르는 행 수. 값은 1-12 사이의 숫자여야 합니다 | |
| span | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | null | grid 항목이 가로지르는 컬럼 수. 값은 1-12 사이의 숫자여야 합니다 |
| xl | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | grid 항목이 대형(xLarge) 기기에서 가로지르는 컬럼 수. 값은 1-12 사이의 숫자여야 합니다 | |
| xl2 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | grid 항목이 초대형(2xLarge) 기기에서 가로지르는 컬럼 수. 값은 1-12 사이의 숫자여야 합니다 | |
| xl2Offset | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | grid 항목이 초대형(2xLarge) 기기에서 오프셋되는 컬럼 수. 값은 1-12 사이의 숫자여야 합니다 | |
| xl2RowSpan | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | grid 항목이 초대형(2xLarge) 기기에서 가로지르는 행 수. 값은 1-12 사이의 숫자여야 합니다 | |
| xlOffset | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | grid 항목이 대형(xLarge) 기기에서 오프셋되는 컬럼 수. 값은 1-12 사이의 숫자여야 합니다 | |
| xlRowSpan | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | grid 항목이 대형 기기에서 가로지르는 행 수. 값은 1-12 사이의 숫자여야 합니다 |