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

배경

관리자 대시보드의 레이아웃이 float와 clearfix로 구성되어 있었다. 반응형 작업을 하다 보니 미디어 쿼리가 너무 복잡해져서 CSS Grid 도입을 검토했다.

브라우저 지원

올해 3월 주요 브라우저들이 CSS Grid를 정식 지원하기 시작했다. 문제는 IE11인데, 회사 타겟 브라우저에 포함되어 있어서 -ms- prefix를 사용하는 방법을 찾아야 했다.

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

.sidebar {
  -ms-grid-column: 1;
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  grid-column: 1;
  grid-row: 1 / 3;
}

마이그레이션 과정

1. 기존 float 코드를 주석 처리하고 Grid로 재작성
2. autoprefixer 설정에 grid: true 추가
3. IE11에서 테스트 - gap이 제대로 안 먹혀서 수동으로 -ms-grid-column 조정
4. 일부 복잡한 레이아웃은 여전히 flexbox 유지

결과

미디어 쿼리 코드가 40% 정도 줄었다. Grid의 grid-template-areas를 사용하니 레이아웃 구조가 한눈에 보여서 유지보수가 편해졌다. 다만 IE11 대응 때문에 prefix 코드가 많아져서 PostCSS 의존성이 높아진 건 trade-off다.

아직 팀 내에서 Grid 문법에 익숙하지 않은 개발자들이 있어서 간단한 가이드 문서를 작성해뒀다.