프론트엔드

Flexbox vs Grid

Flexbox는 1차원(행 또는 열) 배치, Grid는 2차원(행과 열) 배치에 적합합니다.

두 CSS 레이아웃 시스템입니다. 다루는 축의 수가 핵심 차이입니다.

Flexbox를 쓸 때

한 줄 정렬, 가운데 정렬, 메뉴 배치 등에 사용합니다.

행과 열이 모두 있는 복잡한 레이아웃(대시보드·갤러리)에 사용합니다.

한 방향이면 Flexbox, 격자 레이아웃이면 Grid입니다. 실무에서는 둘을 함께 조합해 씁니다.