CSS Grid Layout으로 복잡한 레이아웃 구현하기

문제 상황

대시보드 레이아웃을 구현하는데 Flexbox만으로는 복잡한 그리드 배치가 어려웠다. 특히 아이템마다 다른 크기를 가지고, 반응형으로 재배치되어야 하는 요구사항이 까다로웠다.

CSS Grid 도입

CSS Grid Layout이 올해 3월 주요 브라우저에서 지원되기 시작했다. IE11은 -ms- prefix와 함께 구버전 스펙을 지원하므로, autoprefixer 설정을 조정했다.

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

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

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

브라우저 호환성 처리

IE11에서는 grid-gap 대신 margin을 사용하고, auto-fit이 제대로 동작하지 않아 미디어 쿼리로 대응했다.

@supports (display: grid) {
  .dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .dashboard {
    display: -ms-grid;
    -ms-grid-columns: 1fr 20px 1fr 20px 1fr;
  }
}

결과

Flexbox로 작성했던 200줄 가까운 CSS가 80줄로 줄었다. 반응형 breakpoint도 3개에서 1개로 단순화됐다. IE11에서는 fallback으로 기본 flexbox 레이아웃이 표시되도록 했고, 모던 브라우저에서는 Grid를 사용하도록 구성했다.

아직 프로덕션에 Grid를 전면 도입하기엔 이르지만, 점진적으로 적용 범위를 넓혀갈 계획이다.