CSS Flexbox와 Grid, 무엇이 다르고 언제 선택해야 할까 빠른 답 한 줄 정렬, 버튼 그룹, 메뉴 바처럼 콘텐츠 흐름이 먼저 보이는 화면은 Flexbox 쪽이 더 단순하게 풀리는 경우가 많습니다. 페이지 골격, 카드 목록, 대시보드처럼 행과 열 규칙을 먼저 정해야 하는 화면은 Grid가 더 읽기 쉽고 배치도 안정적으로 유지됩니다. 둘은 대체재라기보다 함께 쓰는 경우가 많습니다. 바깥 구조는 Grid로, 카드나 헤더 내부 정렬은 Flexbox로 나누면 역할이 또렷해집니다. 1차원 과 2차원 이라는 구분만 외우기보다, 콘텐츠 크기 변화가 먼저인지 배치 규칙이 먼저인지로 보면 선택이 한결 쉬워집니다. Flexbox와 Grid는 둘 다 CSS 레이아웃 도구이지만, 브라우저가 레이아웃을 계산하는 출발점이 다릅니다. 브라우저는 DOM과 CSSOM을 합쳐 렌더 트리를 만든 뒤 레이아웃 단계에서 박스의 크기와 위치를 정하는데, 이때 Flexbox는 아이템 흐름을 중심에 두고, Grid는 트랙 구조를 중심에 둡니다. 목차 한눈에 비교 시간 흐름으로 이해하기 브라우저 안에서 실제로 무슨 순서로 일어날까 왜 둘 다 정렬 도구처럼 보여 헷갈릴까 선택 기준 매트릭스 Flexbox가 먼저 떠오르는 장면 Grid가 먼저 떠오르는 장면 함께 쓰는 구성이 더 자연스러운 경우 DevTools로 확인하는 포인트 자주 헷갈리는 지점 더 읽을 거리 한눈에 비교 출발점 Flexbox는 아이템의 순서와 크기를 따라 남는 공간을 분배하고, Grid는 컨테이너의 행과 열을 먼저 선언한 뒤 아이템을 그 위에 올립니다. 계산 축 Flexbox는 주 축과 교차 축이라는 한 축 중심 계산이 기본이고, Grid는 행과 열을 함께 다루는 2차원 배치가 기본입니다. 줄바꿈 이후 Flexbox는 flex-wrap 이 걸려도 각 줄이 독립적으로 공간을 나누고, Grid는 같은 열 트랙을 공유하므로 열 폭이 더 일정하게 유지됩니다. 제어 위치 Flexbox는 flex-grow , flex-sh...