CSS Grid와 Flexbox를 함께 쓰는 레이아웃 패턴

문제 상황

어드민 대시보드 리뉴얼 작업을 진행하면서 복잡한 레이아웃 요구사항을 받았다. 메인 컨테이너는 2D 그리드 구조, 각 카드 내부는 1D 정렬이 필요했다. Float나 positioning으로는 코드가 지나치게 복잡해질 것 같았다.

Grid로 전체 구조 잡기

전체 레이아웃은 CSS Grid로 구성했다.

.dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 20px;
}

auto-fit과 minmax를 사용해 반응형을 자동으로 처리했다. 미디어쿼리 없이도 화면 크기에 따라 열 개수가 조정된다.

Flexbox로 카드 내부 정렬

각 카드 내부는 Flexbox로 처리했다.

.card {
  display: flex;
  flex-direction: column;
}

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

.card-body {
  flex: 1;
}

수직 방향은 Grid보다 Flexbox가 직관적이었다. flex: 1로 남은 공간을 채우는 패턴도 간단하게 구현됐다.

결과

• Grid: 2차원 레이아웃, 전체 구조
• Flexbox: 1차원 정렬, 컴포넌트 내부

이 조합으로 코드량이 30% 정도 줄었고, IE11 지원도 autoprefixer로 해결했다. 브라우저 지원율이 90%를 넘어선 지금, Grid를 적극 활용할 시점이라고 판단한다.