2026-01-17

Flexbox란?

한 방향(1차원) 레이아웃을 위한 CSS 레이아웃 시스템

가로(row) 또는 세로(column) 한 방향 기준
요소 정렬과 간격 조절에 강함
콘텐츠 크기에 따라 유연하게 배치
정렬(align, justify)에 특화

핵심 속성

display: flex
flex-direction
justify-content
align-items
flex-grow, flex-shrink, flex-basis

Grid란?

행(Row)과 열(Column)을 동시에 다루는 2차원 레이아웃 시스템

전체 페이지 구조 설계에 적합
복잡한 레이아웃 구성
영역 기반 레이아웃 가능
정형적인 화면 구성에 강함

핵심 속성

display: grid
grid-template-rows
grid-template-columns
grid-template-areas
gap

Flexbox와 Grid 차이

구분	Flexbox	Grid
레이아웃 차원	1차원	2차원
기준 방향	한 방향(row/column)	행 + 열
설계 방식	콘텐츠 중심	레이아웃 중심
정렬	요소 정렬에 강함	전체 구조 설계에 강함
대표 사용	컴포넌트 내부	페이지 전체

적당한 경우

Flexbox가 적합한 경우

한 줄 또는 한 방향 정렬
요소 개수가 유동적
간단한 UI 정렬

⇒ 정렬이 목적일 때

Grid가 적합한 경우

행/열 구조가 명확함
페이지 뼈대 설계
영역 기반 레이아웃

⇒ 레이아웃 설계가 목적일 때

혼합 사용

Grid로 큰 틀 → Flexbox로 내부 정렬 ex. 페이지 전체 → Grid, 카드 내부 버튼 정렬 → Flexbox

참고자료

https://velog.io/@ikkim01/CSS-Flex-VS-Grid
https://free-eunb.tistory.com/86

results matching ""

No results matching ""