CSS Grid로 복잡한 대시보드 레이아웃 구현하기

문제 상황

기존 관리자 대시보드는 Flexbox로 구현되어 있었는데, 위젯 배치가 복잡해지면서 코드 관리가 어려워졌다. 특히 반응형 처리를 위해 미디어 쿼리마다 order 속성을 변경하는 게 번거로웠다.

CSS Grid 도입

CSS Grid는 IE11을 제외하면 브라우저 지원이 충분해서 도입을 결정했다. 우리 서비스는 IE11 사용자가 5% 미만이었다.

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

.widget-large {
  grid-column: span 2;
}

@media (max-width: 768px) {
  .widget-large {
    grid-column: span 1;
  }
}

주요 개선 사항

1. 명시적인 레이아웃 구조

Flexbox는 1차원 레이아웃이라 행과 열을 동시에 다루기 어려웠다. Grid는 2차원 레이아웃이라 한눈에 구조가 파악된다.

2. 반응형 처리 간소화

auto-fit과 minmax()를 사용하면 미디어 쿼리 없이도 자동으로 열 개수가 조정된다. 코드량이 약 40% 줄었다.

3. 갭 처리

기존에는 마진으로 처리해서 첫/마지막 요소 예외 처리가 필요했는데, gap 속성으로 깔끔하게 해결됐다.

남은 과제

IE11 사용자를 위한 폴백은 @supports 쿼리로 처리했다. Flexbox로 기본 레이아웃만 유지되도록 했고, 완벽하진 않지만 사용에는 문제없는 수준이다.

@supports not (display: grid) {
  .dashboard {
    display: flex;
    flex-wrap: wrap;
  }
}

다음에는 grid-template-areas를 활용해서 더 복잡한 레이아웃도 시도해볼 예정이다.