CSS Grid와 Flexbox 혼용하며 겪은 레이아웃 이슈

문제 상황

대시보드 레이아웃을 Grid로 전환하는 작업을 진행했다. 메인 레이아웃은 Grid로, 내부 카드 컴포넌트는 Flexbox로 구성했는데 IE11에서 레이아웃이 깨지는 문제가 발생했다.

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

.card {
  display: flex;
  flex-direction: column;
}

IE11은 gap 속성을 지원하지 않고, auto-fit도 제대로 동작하지 않았다.

해결 방법

Autoprefixer로 -ms- prefix를 자동 추가하고, gap은 margin으로 fallback 처리했다.

.dashboard {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  -ms-grid-columns: 1fr 20px 1fr 20px 1fr;
}

.card {
  margin: 10px;
}

@supports (gap: 20px) {
  .dashboard {
    gap: 20px;
  }
  .card {
    margin: 0;
  }
}

@supports로 feature detection을 하니 모던 브라우저에서는 gap을 사용하고, IE11에서는 margin으로 대체할 수 있었다.

결론

Grid를 프로덕션에 적용하려면 여전히 IE11 대응이 필요하다. autoprefixer와 @supports를 활용한 progressive enhancement 방식이 현실적인 선택이었다. 내년쯤에는 IE11 지원을 종료할 수 있기를 바란다.