CSS Grid와 Flexbox 혼용하여 복잡한 레이아웃 구성하기

문제 상황

관리자 대시보드 UI 리뉴얼 작업을 맡았다. 기존에는 float와 clearfix를 사용한 레이아웃이었는데, 반응형 처리가 복잡하고 유지보수가 어려웠다. 디자인팀에서 요구한 레이아웃은 2차원적인 그리드 구조였고, 각 카드 내부는 세밀한 정렬이 필요했다.

해결 방법

외곽 레이아웃은 CSS Grid로, 카드 내부 컴포넌트는 Flexbox로 구성했다.

/* 대시보드 전체 레이아웃 */
.dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
}

/* 카드 내부 */
.card {
  display: flex;
  flex-direction: column;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #e0e0e0;
}

.card-body {
  flex: 1;
  padding: 16px;
}

grid-template-columns에 auto-fit과 minmax를 조합하니 미디어쿼리 없이도 자연스러운 반응형이 구현됐다. 카드가 3개에서 2개, 1개로 자동으로 줄어들었다.

배운 점

• Grid는 2차원 레이아웃(행과 열)에 적합하다
• Flexbox는 1차원 정렬(주축 기준)에 강력하다
• 둘을 중첩해서 사용하는 것이 실무에서 가장 효과적이었다
• auto-fit과 minmax의 조합은 반응형 그리드의 핵심이다

IE11 지원 때문에 일부 페이지는 여전히 Flexbox만 사용해야 했지만, 모던 브라우저 타겟 프로젝트에서는 Grid를 적극 활용할 예정이다.