CSS Grid Layout 실전 적용 후기

배경

대시보드 레이아웃을 리뉴얼하면서 CSS Grid를 도입하기로 결정했다. 올해 3월 주요 브라우저에서 Grid 지원이 완료되었지만, 여전히 IE11 지원이 필요한 상황이었다.

접근 방법

@supports를 활용한 점진적 향상 방식을 선택했다.

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

.dashboard-item {
  flex: 1 1 300px;
}

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

IE11에서는 Flexbox 레이아웃이 적용되고, 모던 브라우저에서는 Grid가 적용되도록 구성했다.

문제점

IE11의 Grid 구현은 -ms- prefix를 사용하는 구버전 스펙이라 @supports로 감지되지만 실제로는 다른 문법을 사용한다. Autoprefixer가 일부 변환해주지만 복잡한 레이아웃에서는 한계가 있었다.

결국 IE11에서는 Grid를 완전히 비활성화하고 Flexbox만 사용하기로 했다.

결과

• 코드 가독성이 크게 개선됨
• gap 속성으로 마진 계산 불필요
• 반응형 처리가 단순해짐

IE11 점유율이 더 떨어지면 Flexbox 폴백을 제거할 예정이다.