AI Store에서 AI코딩으로 만들어진 앱을 만나보세요!
지금 바로 방문하기

CSS Grid vs Flexbox: 확장적인 튜토리얼과 예제

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

웹 개발자, 특히 CSS 레이아웃 시스템에 입문한 자

핵심 요약

  • Flexboxflex 속성을 사용해 단일 축(행 또는 열)에 요소를 정렬하는 1차원 레이아웃 시스템으로, 동적 콘텐츠에 적합 (예: 네비게이션 바, 카드 레이아웃)
  • CSS Gridgrid 속성을 사용해 2차원 레이아웃(행과 열 모두 제어)을 가능하게 하며, 구조화된 디자인(예: 헤더/사이드바/메인/푸터)에 적합
  • Flexboxjustify-content, align-items로 단일 축 정렬, Gridgrid-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:
  • .containergrid-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로 매디어 쿼리 없이 동적 그리드 생성
  • 복잡한 중첩은 피하고, 브라우저 개발도구로 렌더링 성능 점검