CSS Layout Patterns

Grid와 Flex, 언제 어떤 걸 써야 할까? 실전 패턴별로 비교해보는 레이아웃 가이드

Grid = 2차원Flex = 1차원

페이지 골격 Grid

Header / Sidebar / Main / Footer 영역 분할

Grid

Header

Side

Main

Footer

Flex (중첩 필요)

Header

Side

Main

Footer

Grid — 한 번에 해결

.page {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
}

→

Grid 승. 영역 이름으로 직관적 배치. Flex는 중첩 래퍼가 필요해 구조가 복잡해진다.

네비게이션 바 Flex

로고 + 메뉴 아이템 + 액션 버튼 수평 배치

Flex

Logo

Grid

Logo

Flex — 심플

.nav {
  display: flex;
  align-items: center;
  gap: 16px;
}
.nav-links { flex: 1; } /* 남은 공간 차지 */

→

Flex 승. 1차원 수평 배치의 교과서적 케이스. space-between이나 flex: 1로 자연스러운 공간 분배.

카드 갤러리 Grid

반응형 카드 그리드, 열 수 자동 조절

Grid — auto-fill + minmax

Grid — 반응형 카드 그리드 핵심 패턴

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
/* 미디어쿼리 없이 반응형 완성 */

→

Grid 승. auto-fill + minmax는 Grid에서만 가능한 킬러 패턴. Flex의 flex-wrap은 마지막 줄 정렬이 지저분해진다.

카드 내부 콘텐츠 Flex

이미지 + 텍스트 + 버튼 수직 배치, 버튼은 항상 하단

Flex

이미지

제목과 설명 텍스트가 들어가는 영역

버튼

핵심: margin-top: auto

이미지

짧은 텍스트

버튼 (항상 하단)

Flex — 카드 내부

.card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.card-action {
  margin-top: auto; /* 항상 카드 하단에 고정 */
}

→

Flex 승. margin-top: auto로 버튼을 하단에 밀어내는 건 Flex 전용 트릭. 카드 높이가 달라도 버튼 위치가 정렬된다.

완벽한 센터링 둘 다 OK

요소를 정중앙에 배치

Grid — 1줄

센터

Flex — 2속성

센터

Grid vs Flex 센터링

/* Grid — 가장 짧은 센터링 */
.center-grid { display: grid; place-items: center; }

/* Flex */
.center-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

→

Grid이 살짝 우세. place-items: center 한 줄이면 끝. 다만 둘 다 잘 작동하므로 취향 차이.

사이드바 + 콘텐츠 Grid

고정 너비 사이드바 + 유동 메인 영역

Grid

Main — 나머지 공간 전부

Grid — 고정 + 유동

.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
}
/* 반응형: 좁은 화면에서 1단 */
@media (max-width: 768px) {
  .layout { grid-template-columns: 1fr; }
}

→

Grid 승. 열 크기를 명시적으로 선언. Flex에서도 가능하지만 flex-shrink: 0을 잊으면 사이드바가 찌그러진다.

폼 레이아웃 Grid

라벨 + 인풋 2열 정렬, 복잡한 필드 배치

Grid — 깔끔한 2열

이름

input

이메일

input

주소

input

Grid — 필드 span

이름

성

이메일 (전체 너비)

시

구

Grid — 폼 필드 배치

.form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.full-width {
  grid-column: 1 / -1; /* 2열 모두 차지 */
}

→

Grid 승. grid-column: 1 / -1로 특정 필드만 전체 너비로 확장하는 게 핵심. Flex로는 이런 부분 확장이 어렵다.

대시보드 Grid + Flex

실전에서 둘을 조합하는 패턴

Grid(골격) + Flex(내부)

매출₩12.4M

사용자3,847

전환율4.2%

차트 영역 (Grid로 2열 span)

최근 활동

실전 — Grid + Flex 조합

/* 바깥 골격: Grid */
.dashboard {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.chart { grid-column: span 2; }

/* 안쪽 메트릭 카드: Flex */
.metric-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

→

조합이 정답. Grid로 영역을 나누고, 각 카드 내부는 Flex로 정렬. 대시보드에서 이 패턴이 가장 자연스럽다.

판단 치트시트

Grid를 쓸 때

페이지 전체 골격 잡기
카드 갤러리 (행+열 통제)
폼 필드 2차원 배치
대시보드 위젯 배치
영역 이름(grid-area)이 필요할 때

Flex를 쓸 때

네비게이션 바, 버튼 그룹
카드 내부 콘텐츠 정렬
아이콘 + 텍스트 인라인 배치
동적 개수의 아이템 나열
space-between으로 간격 분배

판단 기준

2차원(행+열) → Grid
1차원(한 줄) → Flex
레이아웃 먼저 정의 → Grid
콘텐츠가 크기 결정 → Flex
확신 없으면 → Flex부터