CSS Grid를 실제 프로젝트에 도입하면서 겪은 문제들

배경

관리자 페이지의 대시보드 레이아웃을 개편하면서 CSS Grid를 도입하기로 했다. 기존 float 기반 레이아웃은 유지보수가 어려웠고, Flexbox만으로는 2차원 레이아웃 구성이 번거로웠다.

IE11 문제

가장 큰 이슈는 IE11 지원이었다. 회사 정책상 IE11을 지원해야 했는데, Grid의 IE 구현은 -ms- prefix 기반의 구버전 스펙이었다.

/* 모던 브라우저 */
.dashboard {
  display: grid;
  grid-template-columns: 200px 1fr 300px;
  grid-gap: 20px;
}

/* IE11 */
.dashboard {
  display: -ms-grid;
  -ms-grid-columns: 200px 20px 1fr 20px 300px;
  -ms-grid-rows: auto;
}

.sidebar {
  -ms-grid-column: 1;
}

.main {
  -ms-grid-column: 3;
}

IE11은 grid-gap을 지원하지 않아 수동으로 간격 컬럼을 추가해야 했다. 자식 요소마다 -ms-grid-column 위치를 명시해야 하는 것도 번거로웠다.

Autoprefixer 한계

Autoprefixer를 사용했지만 복잡한 레이아웃은 자동 변환이 불완전했다. grid-template-areas는 아예 변환되지 않았다.

결국 Critical한 레이아웃만 Grid를 적용하고, IE11용 fallback CSS를 별도로 작성하는 방식으로 타협했다.

@supports (display: grid) {
  .dashboard {
    display: grid;
    grid-template-columns: 200px 1fr 300px;
    gap: 20px;
  }
}

소회

CSS Grid 자체는 훌륭했지만, 브라우저 지원 현실이 발목을 잡았다. 당분간은 Flexbox 위주로 가고, Grid는 제한적으로 사용할 예정이다. IE11 점유율이 더 떨어지길 기다리는 수밖에 없다.