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

배경

회사 어드민 대시보드의 레이아웃이 float와 absolute positioning의 조합으로 되어 있었다. 반응형 처리를 위해 미디어쿼리마다 width 계산이 복잡했고, 유지보수가 어려웠다.

CSS Grid가 주요 브라우저에서 지원되기 시작했고, IE11도 -ms- prefix로 지원한다는 걸 확인해서 마이그레이션을 진행했다.

기존 코드

.dashboard {
  width: 100%;
}
.sidebar {
  float: left;
  width: 240px;
}
.main {
  margin-left: 240px;
}
.widget {
  float: left;
  width: calc(33.33% - 20px);
  margin: 10px;
}

Grid 적용

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

훨씬 간결해졌다. auto-fit과 minmax를 조합하니 미디어쿼리 없이도 반응형이 동작했다.

IE11 대응

webpack에 autoprefixer 설정을 추가했다.

// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer')({
      browsers: ['last 2 versions', 'ie >= 11']
    })
  ]
};

display: -ms-grid와 -ms-grid-columns 등으로 자동 변환되었다. 다만 IE11에서는 gap 속성이 없어서 margin으로 대체했다.

결과

CSS 라인 수가 30% 정도 줄었고, 레이아웃 버그도 사라졌다. Grid의 명시적인 구조 덕분에 신규 개발자도 코드를 쉽게 이해했다.

Flexbox로도 가능했겠지만, 2차원 레이아웃에는 Grid가 더 적합하다고 판단했다.