CSS Flexbox vs Grid, 언제 뭘 쓸까? 상황별 선택 기준 비교

"레이아웃이 안 맞으면 일단 display: flex부터 넣고 본다"—많은 초보 개발자가 이렇게 시작하지만, 카드 목록을 3열로 반듯하게 맞추려다 flex-wrap과 calc() 지옥에 빠지는 경우가 흔하다. Flexbox와 Grid는 경쟁 관계가 아니라 역할이 다른 도구다. 이 글은 둘의 결정적 차이와 "지금 이 화면엔 뭘 써야 하나"를 상황별로 정리한다.

Flexbox와 Grid, 뭐가 다를까

가장 중요한 한 줄: Flexbox는 1차원(축 하나), Grid는 2차원(행과 열 동시) 레이아웃 도구다.

• Flexbox는 한 방향으로 아이템을 늘어놓는다. 가로 한 줄(flex-direction: row) 또는 세로 한 줄(column) 중 하나를 기준으로 배치·정렬·간격을 다룬다. 콘텐츠의 크기에 맞춰 유연하게 흐르는(content-first) 방식이다.
• Grid는 행과 열을 먼저 정의하고 그 격자 안에 아이템을 앉힌다. "3열 × 2행" 같은 틀을 먼저 잡는(layout-first) 방식이라, 가로·세로 정렬을 동시에 통제한다.

쉽게 말해 한 줄로 세우면 Flexbox, 바둑판을 짜면 Grid다.

한눈에 보는 Flexbox vs Grid 비교표

핵심은 마지막 두 행이다. 카드가 화면 폭에 따라 4열→2열→1열로 자동 조정되길 바란다면 Grid의 repeat(auto-fit, minmax(240px, 1fr)) 한 줄이 Flexbox의 flex-wrap + flex-basis 조합보다 훨씬 깔끔하다.

상황별 선택 기준: 이럴 땐 이걸 쓰세요

실무에서 마주치는 대표 상황을 정리하면 이렇다.

중앙 정렬은 예외적으로 둘 다 쉽다. Grid에서는 place-items: center 한 줄, Flexbox에서는 위 두 속성 조합으로 가능하다. 단일 요소 하나만 가운데 둔다면 어느 쪽이든 무방하다.

CSS 값 단위 선택이 헷갈린다면 px·rem·em 차이 정리를 함께 참고하면 좋다. 그림자·입체감이 필요할 땐 박스 그림자 생성기로 값을 바로 뽑아 쓸 수 있다.

둘을 함께 쓰는 게 정답일 때가 많다

실전에서는 "Flexbox냐 Grid냐"가 아니라 바깥은 Grid, 안은 Flexbox로 중첩하는 패턴이 가장 흔하다. 예를 들어 제품 카드 갤러리라면:

• 갤러리 전체는 Grid로 3열 격자를 만들고,
• 각 카드 내부(썸네일-제목-가격-버튼의 세로 흐름)는 Flexbox로 정렬한다.

.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.card    { display: flex; flex-direction: column; gap: 8px; }

이렇게 하면 카드 개수·화면 폭이 바뀌어도 갤러리는 자동으로 열을 조정하고, 카드 내부 요소는 항상 위아래로 정렬된다. 이미지 카드의 세로·가로 비율을 일정하게 유지하려면 이미지 비율 계산기로 aspect-ratio 값을 잡아두면 편하다.

브라우저 지원과 성능

둘 다 걱정할 필요가 거의 없다. Can I Use 통계 기준(2026년) 전 세계 브라우저의 약 98% 이상이 Flexbox와 Grid를 모두 지원하며, 인터넷 익스플로러를 제외한 모든 현대 브라우저에서 완전 동작한다. IE11만 예외적으로 Grid를 구버전 문법(-ms-)으로 부분 지원하지만, 마이크로소프트가 2022년 IE 지원을 공식 종료했으므로 대부분의 프로젝트에서 고려 대상이 아니다.

성능 면에서도 유의미한 차이는 없다. 수백 개 이상의 아이템을 다루는 극단적 경우가 아니라면 렌더링 비용은 사실상 동일하니, "뭐가 더 빠른가"가 아니라 "뭐가 더 읽기 쉬운 코드인가"를 기준으로 고르면 된다.

자주 묻는 질문

Flexbox만 알아도 충분한가요? 네비바나 버튼 그룹 같은 단순 레이아웃만 만든다면 당분간은 Flexbox만으로도 대응됩니다. 하지만 카드 갤러리나 페이지 전체 골격을 짜기 시작하면 Grid가 훨씬 적은 코드로 해결되므로, 두 가지를 모두 익혀 상황에 맞게 쓰는 편이 결국 시간을 아낍니다.

Grid가 더 강력하니 Flexbox 대신 Grid만 쓰면 안 되나요? 가능하지만 비효율적입니다. 개수가 유동적인 한 줄짜리 배치(태그, 버튼 묶음)에는 Flexbox가 더 직관적이고 코드도 짧습니다. 2차원 격자가 필요 없는데 Grid를 쓰면 grid-template 정의가 오히려 군더더기가 됩니다.

gap 속성은 Flexbox에서도 쓸 수 있나요? 네. 과거에는 Grid 전용이었지만 현재 모든 현대 브라우저가 Flexbox의 gap도 지원합니다. 덕분에 아이템 사이 간격을 margin 없이 gap 한 줄로 처리할 수 있어, 마지막 아이템 여백을 지우는 번거로움이 사라졌습니다.

반응형에서 열 개수를 자동으로 바꾸려면? Grid의 repeat(auto-fit, minmax(최소폭, 1fr))이 가장 간단합니다. 미디어 쿼리 없이도 화면 폭에 따라 열 수가 자동 조정됩니다. Flexbox로는 flex-wrap: wrap과 flex-basis를 조합해야 하는데, 열을 정확히 맞추기가 더 까다롭습니다.