CSS Grid Layout 실무 도입 후기

배경

관리자 대시보드 리뉴얼 작업을 진행하면서 복잡한 레이아웃 구조를 개선할 필요가 있었다. 기존에는 float와 Flexbox를 섞어 쓰고 있었는데, 중첩된 구조가 많아지면서 유지보수가 어려워졌다.

CSS Grid가 지난 3월 Chrome, Firefox에서 정식 지원을 시작했고, 이번 기회에 도입을 검토했다.

브라우저 지원 전략

문제는 IE11 지원이었다. 고객사 요구사항상 IE11을 포기할 수 없었기에 Progressive Enhancement 방식을 선택했다.

.dashboard-grid {
  display: flex;
  flex-wrap: wrap;
}

.dashboard-item {
  flex: 0 0 calc(33.333% - 20px);
  margin: 10px;
}

@supports (display: grid) {
  .dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 20px;
  }
  
  .dashboard-item {
    margin: 0;
  }
}

@supports를 사용해 Grid를 지원하는 브라우저에서만 Grid 레이아웃을 적용했다. IE11에서는 Flexbox로 비슷한 레이아웃을 구현한다.

개선 효과

특히 카드 레이아웃이 많은 페이지에서 효과가 컸다. 기존에는 마지막 row의 아이템들을 처리하기 위해 :nth-child 선택자로 margin을 조정하는 코드가 많았는데, Grid의 grid-gap으로 깔끔하게 해결됐다.

반응형 breakpoint도 줄어들었다. auto-fit과 minmax를 조합하니 컨테이너 크기에 따라 자동으로 열 개수가 조정됐다.

주의사항

IE11의 Grid 구현은 -ms- prefix를 사용하는 구버전 스펙이라 호환성이 좋지 않다. 차라리 fallback을 명확히 분리하는 게 나았다.

당분간은 주요 레이아웃에만 제한적으로 사용하고, 팀 내 학습 시간을 가질 예정이다.