CSS Grid로 복잡한 레이아웃 마이그레이션하기

배경

사내 관리자 대시보드의 레이아웃이 float와 flexbox가 혼재되어 있었다. 반응형 분기점마다 미디어쿼리가 중복되고, 특정 해상도에서 레이아웃이 깨지는 이슈가 반복됐다.

CSS Grid를 도입하기로 결정했지만, IE11 지원 요구사항이 있어서 신중하게 접근했다.

적용 과정

기존 코드는 이런 형태였다.

.dashboard {
  display: flex;
  flex-wrap: wrap;
}
.sidebar {
  width: 250px;
  float: left;
}
.main {
  width: calc(100% - 250px);
  float: left;
}

Grid로 변경하면서 훨씬 명확해졌다.

.dashboard {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr;
  gap: 20px;
}

@media (max-width: 768px) {
  .dashboard {
    grid-template-columns: 1fr;
  }
}

IE11 대응

IE11은 Grid를 지원하지만 -ms- prefix를 쓰는 구버전 스펙이다. autoprefixer 설정으로 대부분 해결됐다.

// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer')({
      grid: 'autoplace'
    })
  ]
}

복잡한 grid-area는 IE11에서 제대로 동작하지 않아 @supports 를 활용했다.

.sidebar {
  width: 250px; /* fallback */
}

@supports (display: grid) {
  .sidebar {
    width: auto;
    grid-column: 1 / 2;
  }
}

결과

• 레이아웃 관련 CSS 라인 수 40% 감소
• 미디어쿼리 중복 제거
• IE11 포함 모든 브라우저에서 정상 동작 확인

Grid가 생각보다 IE11 지원이 괜찮아서, 앞으로 새 프로젝트에는 적극 도입할 예정이다.