레이아웃 개요
레이아웃 개요 (Layouts overview)
PatternFly의 레이아웃은 페이지에 컴포넌트를 배치하는 데 사용돼요. 다양한 화면 크기에서 컴포넌트를 체계적으로 정렬하고 정리해 주는 완전한 반응형 구조를 만들어 줘요.
레이아웃을 컴포넌트가 살아갈 뼈대(scaffolding)라고 생각해 보세요. 페이지를 배치할 때 콘텐츠에 맞는 레이아웃 패턴을 고려해야 해요. 같은 페이지 안에서 여러 레이아웃을 함께 사용해 다양하고 효과적인 UI를 만들 수도 있어요.
출처: 문서
본문
| 레이아웃 | 설명 |
|---|---|
| Bullseye | 콘텐츠를 가로와 세로로 가운데 정렬합니다. |
| Flex | 다른 레이아웃과 PatternFly 컴포넌트에 반응하는, 일관된 간격의 커스텀 레이아웃을 만듭니다. |
| Gallery | 균일한 행과 열로 이루어진 반응형 그리드에 콘텐츠를 배치합니다. |
| Grid | 고정 크기의 12컬럼 그리드에 콘텐츠를 배치합니다. |
| Level | 콘텐츠를 가로로 고르게 분배합니다. |
| Split | 여러 항목을 가로로 분배하며, 뷰포트 크기에 맞춰 적응합니다. |
| Stack | 여러 항목을 세로로 분배하며, 컨테이너의 사용 가능한 공간에 맞춰 적응합니다. |