CSS Flex & Grid 비주얼 가이드

Flex와 Grid의 핵심 차이

어떤 속성이 더 좋은 것이 아니라, 레이아웃의 방향과 구조에 따라 선택합니다.

FLEXBOX

한 방향으로 정렬

가로 또는 세로 중 하나를 중심으로 아이템을 배치합니다.

CSS GRID

행과 열을 동시에 설계

페이지, 카드 목록, 대시보드처럼 2차원 구조를 만들 때 적합합니다.

Flex 주요 속성

부모에게 적용하는 속성과 자식에게 적용하는 속성을 구분해서 기억하면 쉽습니다.

대상	속성	역할	자주 쓰는 값
부모	`display`	Flex 레이아웃 시작	`flex`, `inline-flex`
부모	`flex-direction`	주축 방향 설정	`row`, `column`
부모	`justify-content`	주축 방향 정렬	`center`, `space-between`
부모	`align-items`	교차축 방향 정렬	`center`, `stretch`
부모	`flex-wrap`	줄바꿈 여부	`nowrap`, `wrap`
부모	`gap`	아이템 사이 간격	`8px`, `16px`
자식	`flex`	늘어남·줄어듦·기본 크기	`1`, `0 0 200px`
자식	`align-self`	특정 아이템만 별도 정렬	`center`, `flex-end`
자식	`order`	시각적 순서 변경	`0`, `1`, `-1`

Flex 속성 실시간 실습

왼쪽 값을 변경하면 오른쪽 배치와 CSS 코드가 바로 바뀝니다.

.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 12px;
}

Grid 주요 속성

Grid는 트랙을 정의하는 부모 속성과 셀의 위치를 결정하는 자식 속성이 핵심입니다.

대상	속성	역할	예시
부모	`display`	Grid 레이아웃 시작	`grid`
부모	`grid-template-columns`	열 구조 정의	`repeat(3, 1fr)`
부모	`grid-template-rows`	행 구조 정의	`100px auto`
부모	`gap`	행과 열 사이 간격	`16px`
부모	`justify-items`	각 셀 내부 가로 정렬	`stretch`, `center`
부모	`align-items`	각 셀 내부 세로 정렬	`stretch`, `center`
부모	`grid-auto-flow`	자동 배치 방향	`row`, `column`, `dense`
자식	`grid-column`	열 시작·끝 또는 병합	`span 2`, `1 / 3`
자식	`grid-row`	행 시작·끝 또는 병합	`span 2`
자식	`grid-area`	영역 이름 또는 위치 지정	`header`

Grid 속성 실시간 실습

열 개수와 간격을 조절하고, 특정 카드가 여러 칸을 차지하는 모습을 확인하세요.

1 · span 2

3 · row span 2

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  justify-items: stretch;
  align-items: stretch;
}

.item-wide {
  grid-column: span 2;
}

실무에서는 이렇게 사용합니다

작은 내부 정렬은 Flex, 전체 화면 구조나 카드 배열은 Grid를 사용하는 경우가 많습니다.

FLEX EXAMPLE

헤더와 메뉴 정렬

로고와 메뉴를 양끝으로 배치하고 메뉴 내부도 Flex로 정렬합니다.

LOGO

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

GRID EXAMPLE

대시보드 레이아웃

열 비율을 정의하고 특정 카드를 전체 너비로 확장합니다.

매출
1.2fr 영역

방문자
.8fr 영역

주간 통계
grid-column: 1 / -1

.dashboard {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 12px;
}

.chart {
  grid-column: 1 / -1;
}

어떤 것을 선택해야 할까?

가장 쉬운 판단 기준

한 줄의 아이템을 정렬하거나 가운데 배치하려면 Flex, 행과 열을 함께 설계하거나 카드 위치를 명확하게 제어하려면 Grid를 먼저 생각합니다.

Flex가 적합 버튼 그룹, 헤더 메뉴, 아이콘과 텍스트, 중앙 정렬, 양끝 배치

Grid가 적합 카드 목록, 대시보드, 전체 페이지 틀, 복잡한 행·열 구조

함께 사용 외부 페이지 구조는 Grid, 카드 내부 정렬은 Flex로 조합