CSS 레이아웃을 잡을 때 Grid를 써야 할지, Flexbox를 써야 할지 고민해 본 적 있으신가요? 두 기술 모두 모던 CSS 레이아웃의 핵심이지만, 실무에서 상황에 맞지 않는 선택을 하면 코드가 불필요하게 복잡해지곤 합니다. 이 글에서는 CSS Grid와 Flexbox의 근본적인 차이를 정리하고, 어떤 상황에서 어떤 도구를 선택하면 좋을지 실전 기준을 제시합니다.
CSS Grid와 Flexbox는 무엇이 다른가요?
가장 핵심적인 차이는 차원입니다. Flexbox는 한 방향(가로 또는 세로)으로 요소를 배치하는 1차원 레이아웃 시스템입니다. 반면 CSS Grid는 행과 열을 동시에 제어하는 2차원 레이아웃 시스템입니다.
쉽게 비유하자면, Flexbox는 한 줄짜리 빨랫줄에 옷을 순서대로 거는 것이고, CSS Grid는 바둑판 위에 원하는 칸에 돌을 놓는 것과 비슷합니다.
| 구분 | Flexbox | CSS Grid |
|---|---|---|
| 차원 | 1차원 (행 또는 열) | 2차원 (행과 열 동시) |
| 레이아웃 방향 | 콘텐츠 기반 (안에서 밖으로) | 레이아웃 기반 (밖에서 안으로) |
| 적합한 상황 | 내비게이션 바, 카드 내부 정렬 | 전체 페이지 레이아웃, 대시보드 |
| 브라우저 지원 | 거의 모든 브라우저 (IE 10+) | 모든 모던 브라우저 (IE 미지원) |
| 정렬 제어 | 주축/교차축 정렬 | 행/열/영역 단위 정렬 |
Flexbox를 선택해야 하는 상황은 언제인가요?
Flexbox는 한 줄 안에서 요소들의 간격과 정렬을 유연하게 제어할 때 가장 강력합니다. 다음과 같은 경우에 적합합니다.
내비게이션 바 정렬: 로고는 왼쪽, 메뉴는 오른쪽처럼 요소를 양쪽 끝으로 배치할 때 justify-content: space-between 한 줄이면 충분합니다.
카드 내부 콘텐츠 정렬: 카드 안에서 제목, 설명, 버튼을 세로로 배치하고 버튼을 항상 하단에 고정하고 싶다면, flex-direction: column과 margin-top: auto를 조합하면 깔끔하게 해결됩니다.
인라인 요소 그룹 정렬: 태그 목록, 버튼 그룹처럼 크기가 제각각인 요소들을 일렬로 나열하면서 자연스럽게 줄바꿈하려면 flex-wrap: wrap이 효과적입니다.
실제로 저는 사이드 프로젝트에서 내비게이션 바를 Grid로 구현하다가 코드가 과하게 복잡해진 경험이 있습니다. Flexbox로 전환하니 CSS가 12줄에서 4줄로 줄었습니다. 단순한 1차원 정렬에 Grid를 쓰는 것은 오버엔지니어링일 수 있습니다.
CSS Grid를 선택해야 하는 상황은 언제인가요?
CSS Grid는 전체 레이아웃의 구조를 설계할 때 진가를 발휘합니다. 행과 열의 크기를 미리 정의하고, 요소를 원하는 위치에 배치할 수 있기 때문입니다.
페이지 전체 레이아웃: 헤더, 사이드바, 메인 콘텐츠, 푸터를 포함하는 전형적인 웹 페이지 구조는 grid-template-areas를 사용하면 직관적으로 설계할 수 있습니다.
css
.layout {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 250px 1fr;
}
갤러리/대시보드: 이미지 갤러리나 대시보드처럼 행과 열에 걸쳐 다양한 크기의 카드를 배치해야 할 때, grid-column: span 2 같은 속성으로 특정 요소만 크게 만들 수 있습니다.
균등한 그리드 배치: repeat(auto-fill, minmax(300px, 1fr))을 사용하면 미디어 쿼리 없이도 반응형 그리드를 구현할 수 있습니다. 이 기법 하나만으로 Lighthouse 접근성 점수를 개선할 수 있었던 경험도 있습니다.
실전에서는 함께 쓰는 것이 정답입니다
사실 Grid와 Flexbox는 경쟁 관계가 아닙니다. 실무에서 가장 효율적인 접근법은 페이지 전체 구조는 Grid로, 컴포넌트 내부 정렬은 Flexbox로 나누어 쓰는 것입니다.
CSS Grid는 2차원 레이아웃 시스템으로 전체 페이지 구조를 정의합니다. Flexbox는 1차원 정렬 도구로 컴포넌트 내부 요소를 배치합니다. 따라서 두 기술을 조합하면 유지보수가 쉽고 가독성 높은 CSS를 작성할 수 있습니다.
예를 들어, 블로그 레이아웃을 설계한다면 이렇게 역할을 나눌 수 있습니다. Grid로 헤더-사이드바-메인-푸터 영역을 배치하고, 각 영역 안의 내비게이션 메뉴나 카드 내부 정렬은 Flexbox로 처리합니다.
어떤 기준으로 선택하면 좋을까요? 한눈에 보는 판단 기준
빠른 판단이 필요할 때는 아래 기준을 참고하세요.
- 한 방향으로만 나열하는가? 그렇다면 Flexbox.
- 행과 열을 동시에 제어해야 하는가? 그렇다면 Grid.
- 콘텐츠 크기에 따라 유연하게 배치해야 하는가? Flexbox.
- 레이아웃 구조를 먼저 정하고 콘텐츠를 채워야 하는가? Grid.
결국 핵심은 “어느 쪽이 더 좋은가?”가 아니라 “지금 이 상황에 어느 쪽이 더 적합한가?”입니다.
자주 묻는 질문 (FAQ)
Q1. CSS Grid와 Flexbox를 동시에 사용해도 되나요?
네, 동시에 사용하는 것이 오히려 권장됩니다. 페이지의 전체 골격은 CSS Grid로 설계하고, 내비게이션 바나 카드 컴포넌트 내부의 요소 정렬은 Flexbox로 처리하는 방식이 실무에서 가장 효율적입니다. 두 기술은 서로 보완적인 역할을 합니다.
Q2. Flexbox로 Grid의 2차원 레이아웃을 흉내 낼 수 있나요?
기술적으로 flex-wrap과 고정 너비를 조합하면 비슷한 결과를 만들 수 있습니다. 하지만 행과 열의 정렬이 독립적으로 작동하지 않기 때문에, 요소 크기가 달라지면 레이아웃이 어긋나기 쉽습니다. 2차원 배치가 필요하다면 처음부터 CSS Grid를 사용하는 것이 코드 유지보수 측면에서 유리합니다.
Q3. IE 브라우저를 지원해야 하면 어떻게 해야 하나요?
2022년 6월 Microsoft가 IE 공식 지원을 종료했기 때문에, 2026년 현재 대부분의 프로젝트에서 IE 호환성을 고려할 필요가 없습니다. 만약 레거시 환경을 지원해야 하는 극히 예외적인 경우라면, Flexbox를 기본으로 사용하고 @supports (display: grid) 쿼리로 Grid를 점진적으로 적용하는 전략이 효과적입니다.
참고 출처:
