CSS Grid vs Flexbox — 차이와 언제 무엇을 쓸까

CSS Grid vs Flexbox — 차이와 언제 무엇을 쓸까

레이아웃을 만들 때 흔히 마주치는 두 가지 도구, CSS Grid와 Flexbox. 둘의 차이와 장단점, 실무에서의 사용 판단 기준을 예제와 함께 정리합니다.

한 줄 요약

• Flexbox — 1차원 레이아웃(행 또는 열). 아이템 정렬/정렬 중심.
• Grid — 2차원 레이아웃(행 + 열). 전체 레이아웃 설계에 강함.
• 간단히 말해: 라인 단위 정렬이면 Flex, 그리드 기반 전체 배치면 Grid.

1) 개념 차이

Flexbox는 주로 한 방향(행 또는 열)에서 아이템을 배치하고 정렬하는 데 최적화되어 있습니다. 컨테이너의 주 축(main axis)과 교차 축(cross axis) 개념이 핵심입니다.

Grid는 행과 열을 동시에 다룹니다. 영역(areas), 트랙(tracks), 라인(lines) 기반으로 전체 레이아웃을 설계하기 좋습니다.

2) 코드 예시 — 간단 비교

Flexbox (수평 정렬에 강함)

<div class="flex-row">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

Grid (행+열 설계에 강함)

<div class="grid-layout">
  <header>헤더</header>
  <nav>네비</nav>
  <main>메인</main>
  <aside>사이드</aside>
  <footer>푸터</footer>
</div>

3) 언제 Flex를 쓰고 언제 Grid를 쓸까?

• Flex 사용 추천
  - 수평(또는 수직) 방향으로 아이템을 정렬할 때 (네비 메뉴, 버튼 그룹).
  - 요소 간 간격을 유연하게 처리하고 싶을 때(컨테이너 크기에 따라 자동 줄바꿈).
  - 단일 축 중심의 레이아웃이나 작은 UI 컴포넌트.
• Grid 사용 추천
  - 페이지 전체 레이아웃(헤더/사이드/콘텐츠/푸터)을 설계할 때.
  - 복잡한 2차원 배치(행과 열 모두 제어)가 필요할 때.
  - 명확한 그리드 영역에 컨텐츠를 배치하거나, 미디어 객체 같은 격자형 레이아웃을 만들 때.
• 혼합 사용
  실무에서는 Grid로 전체 레이아웃을 잡고, 내부 컴포넌트 정렬에는 Flex를 사용하는 식으로 섞어 쓰는 경우가 많습니다. (Grid는 뼈대, Flex는 세부 정렬)

4) 실무 팁 & 트릭

1. auto-fit / auto-fill으로 반응형 카드 레이아웃 만들기 (Grid)
2. minmax()로 최소/최대 크기 제한하기 (Grid)
3. Flex의 flex: 1 1 auto로 남는 공간 나눠주기
4. 아이템 간격은 가능하면 gap을 사용(더 깔끔). Flex와 Grid 모두 지원.
5. IE 호환성이 필요하다면 Grid 일부 기능이 제한될 수 있으니 주의(요즘은 점점 덜 문제).

5) 접근성(Accessibility) 고려사항

레이아웃은 시멘틱 HTML( <nav>, <main>, <header> 등)를 먼저 고려하세요. CSS로 시각적 배치를 바꾸더라도 문서의 의미 구조(읽기 순서)를 보존하는 것이 중요합니다. Grid나 Flex로 시각적 순서를 바꿀 때는 스크린리더 순서에 영향이 있는지 확인하세요.

6) 빠른 비교표

특징	Flexbox	Grid
차원	1차원(행 또는 열)	2차원(행 + 열)
주 용도	아이템 정렬, 버튼 그룹, 네비	페이지 레이아웃, 격자 배치
학습 난이도	쉬움 — 빠르게 익힘	중간 — 개념(트랙/라인/영역)을 익혀야 함

결론

작업의 성격을 먼저 판단하세요. 한 방향 정렬이면 Flex, 행과 열을 동시에 설계해야 하면 Grid. 실무에서는 두 기술을 조합해 사용하는 패턴이 가장 흔하고 가장 강력합니다.

참고용 레이아웃이 더 필요하면 댓글로 알려주세요.