CSS Grid와 Flexbox를 함께 사용하며 배운 점

배경

회사 어드민 페이지의 레이아웃을 개편하게 되었다. 기존 코드는 float와 clearfix를 사용한 구조였는데, 유지보수가 어려웠고 반응형 대응도 복잡했다. CSS Grid가 주요 브라우저에서 지원되기 시작했고, Flexbox도 안정화되었기에 이번 기회에 전환하기로 했다.

Grid vs Flexbox 선택 기준

작업하면서 정리한 사용 기준은 다음과 같다.

• Grid: 페이지 전체 레이아웃, 2차원 구조가 필요한 경우
• Flexbox: 컴포넌트 내부, 1차원 정렬이 필요한 경우

실제 적용 예시

대시보드 레이아웃을 Grid로 구성했다.

.dashboard {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 60px 1fr;
  height: 100vh;
}

.sidebar {
  grid-column: 1;
  grid-row: 1 / 3;
}

.header {
  grid-column: 2;
  grid-row: 1;
}

.main {
  grid-column: 2;
  grid-row: 2;
}

카드 내부의 버튼 배치는 Flexbox를 사용했다.

.card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

배운 점

grid-template-areas를 사용하면 가독성이 더 좋아진다. 처음엔 번거로워 보였지만, 레이아웃 구조를 한눈에 파악할 수 있어서 팀원들 리뷰에서도 호평이었다.

IE11 지원이 필요한 경우 autoprefixer만으로는 부족하고, fallback CSS를 작성해야 한다는 점도 알게 되었다. 다행히 우리 프로젝트는 내부 툴이라 최신 Chrome만 지원하면 되어서 문제없었다.

float를 지우고 나니 CSS 라인 수가 30% 정도 줄었다. 무엇보다 미디어 쿼리에서 레이아웃을 변경할 때 코드가 훨씬 직관적이다.