한양과학기술고등학교

에듀테크 프로젝트 대시보드

Flexbox & Grid

CSS 레이아웃은 오랫동안 float와 position의 편법으로 짜맞춰졌다. Flexbox(2009~)와 Grid(2017~)는 "정렬"과 "배치"를 위해 처음부터 설계된 두 개의 서로 다른 레이아웃 모델이다. 아래 컨트롤을 직접 바꿔가며 두 모델의 차이를 확인해보자.

Flexbox — 1차원

한 줄(행) 또는 한 열(열)을 따라 아이템을 정렬.
내비게이션 바, 버튼 그룹, 카드 안 요소 정렬처럼 "한 방향으로 늘어놓고 공간을 나눠 갖는" 상황에 적합.

Grid — 2차원

행과 열을 동시에 제어하는 격자를 정의.
페이지 전체 레이아웃(헤더·사이드바·본문·푸터)처럼 "가로세로를 한 번에 설계"해야 하는 상황에 적합.

Flexbox 실습 1D

1
2
3

Grid 실습 2D

실무 팁: 둘은 경쟁 관계가 아니라 조합해서 쓴다. 보통 display: grid로 페이지 전체 뼈대(헤더/사이드바/본문/푸터)를 잡고, 그 안의 각 영역(네비게이션 메뉴, 카드 안의 아이콘+텍스트 정렬 등)은 display: flex로 세부 정렬하는 방식이 가장 흔하다.