CSS Grid로 레이아웃 마이그레이션 후기

배경

올해 초부터 진행하던 사내 어드민 페이지를 리뉴얼하면서 레이아웃을 전면 개편하게 되었다. 기존에는 Flexbox와 float를 섞어 쓰고 있었는데, 복잡한 2차원 레이아웃을 구현하기엔 한계가 있었다.

CSS Grid가 올해 주요 브라우저에 정식 지원되기 시작했고, 특히 Chrome 57, Firefox 52 이후로 안정화되었다는 소식에 도입을 검토했다.

IE11 지원 문제

가장 큰 고민은 IE11이었다. 회사 정책상 IE11을 지원해야 했는데, IE는 -ms- prefix가 붙은 구형 Grid 스펙만 지원한다.

/* Modern browsers */
.container {
  display: grid;
  grid-template-columns: 200px 1fr 300px;
  grid-gap: 20px;
}

/* IE11 fallback */
.container {
  display: -ms-grid;
  -ms-grid-columns: 200px 20px 1fr 20px 300px;
}

autoprefixer를 사용하면 자동 변환이 어느 정도 되지만, grid-gap 같은 속성은 수동으로 column 사이에 간격을 넣어줘야 했다.

적용 결과

핵심 레이아웃만 Grid로 전환하고, 세부 컴포넌트는 Flexbox를 유지했다. 특히 사이드바-메인-위젯 구조를 Grid로 만들자 코드가 훨씬 간결해졌다.

.layout {
  display: grid;
  grid-template-columns: 240px 1fr 320px;
  grid-template-rows: 60px 1fr;
  min-height: 100vh;
}

.header {
  grid-column: 1 / -1;
}

미디어 쿼리와 결합하니 반응형 처리도 직관적이었다. grid-template-columns만 바꿔주면 끝이다.

남은 과제

IE11 fallback 코드가 생각보다 번거롭다. 내년에는 IE 점유율이 더 떨어질 것으로 예상되니, 그때 다시 검토해봐야겠다.

Grid의 auto-fill, auto-fit 같은 기능은 아직 제대로 활용하지 못했다. 카드 리스트 같은 곳에 적용하면 좋을 것 같다.