CSS Grid vs Flexbox: 확장적인 튜토리얼과 예제
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
웹 개발자, 특히 CSS 레이아웃 시스템에 입문한 자
핵심 요약
- Flexbox는
flex
속성을 사용해 단일 축(행 또는 열)에 요소를 정렬하는 1차원 레이아웃 시스템으로, 동적 콘텐츠에 적합 (예: 네비게이션 바, 카드 레이아웃) - CSS Grid는
grid
속성을 사용해 2차원 레이아웃(행과 열 모두 제어)을 가능하게 하며, 구조화된 디자인(예: 헤더/사이드바/메인/푸터)에 적합 - Flexbox는
justify-content
,align-items
로 단일 축 정렬, Grid는grid-template-areas
,gap
으로 정밀한 정렬 및 간격 조절 가능
섹션별 세부 요약
1. Flexbox의 주요 특징
- 컨테이너 속성:
display: flex
로 플렉스 컨테이너 정의flex-direction
으로 주 축 방향 설정 (row/column)justify-content
(flex-start
,center
,space-between
)로 주 축 정렬align-items
(stretch
,center
)로 교차 축 정렬- 아이템 속성:
flex-grow
,flex-shrink
로 크기 조절order
로 시각적 순서 변경
2. CSS Grid의 주요 특징
- 컨테이너 속성:
display: grid
로 그리드 컨테이너 정의grid-template-columns
/grid-template-rows
로 열/행 크기 지정grid-template-areas
로 영역 명명 (예:"header header"
)gap
으로 셀 간격 설정- 아이템 속성:
grid-column
/grid-row
로 정확한 위치 지정 (예:1 / 3
)grid-area
로 명명된 영역 할당
3. 실무 예제
- Flexbox:
- 네비게이션 바에
flex-wrap: wrap
사용해 화면 크기 변화 시 아이템 스택 media query
로 모바일 화면에서flex-direction: column
로 전환- CSS Grid:
.container
에grid-template-columns: 250px 1fr
로 고정 사이드바와 유연한 메인 영역 생성grid-template-areas
로 헤더/사이드바/메인/푸터의 위치 명시- Flexbox + Grid 조합:
- Grid로 전체 레이아웃, Flexbox로 카드 내부 요소 정렬 (예: 이미지/내용/버튼 세로 정렬)
4. 성능 및 호환성
- Flexbox:
- 모든 최신 브라우저 지원 (IE10+ 전처리 필요)
- 많은 아이템 시 성능 저하 가능성
- CSS Grid:
- IE11+ 지원 (전처리 필요), 일부 기능 제한
- 복잡한 레이아웃 시 성능 효율적
결론
- Flexbox는 단순한 레이아웃(예: 네비게이션, 카드)에, CSS Grid는 구조화된 디자인(예: 대시보드, 헤더/사이드바)에 적합
- 최적화 팁:
@supports (display: grid)
로 레그ACY 브라우저 대비minmax(0, 1fr)
로 반응형 열 크기 조정auto-fit
+minmax
로 매디어 쿼리 없이 동적 그리드 생성- 복잡한 중첩은 피하고, 브라우저 개발도구로 렌더링 성능 점검