CSS Grid Layout 실전 적용기

배경

관리자 대시보드 리뉴얼 작업에서 복잡한 레이아웃 구조가 필요했다. 기존 float과 Flexbox 조합으로는 코드가 지나치게 복잡해지는 문제가 있었다.

CSS Grid가 올해 3월 주요 브라우저에 정식 지원되면서 실무 적용을 검토했다. 다만 IE11 지원이 필수 요구사항이라 신중하게 접근했다.

적용 전략

전체를 Grid로 전환하기보다 핵심 영역만 선택적으로 적용했다.

.dashboard-layout {
  display: flex; /* 폴백 */
  flex-wrap: wrap;
}

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

@supports로 Grid 지원 여부를 체크하고, 미지원 브라우저엔 Flexbox가 적용되도록 했다.

결과

• 레이아웃 코드 약 40% 감소
• 미디어쿼리 복잡도 개선
• IE11에서도 정상 동작 (Flexbox 폴백)

주의사항

IE11은 -ms- 접두사 붙은 구버전 Grid 스펙을 지원한다. 하지만 현대 Grid 문법과 차이가 커서 Autoprefixer로도 완벽한 변환이 안 된다. 차라리 Flexbox 폴백이 더 안정적이었다.

당분간은 핵심 레이아웃에만 제한적으로 사용하고, 프로젝트별 브라우저 지원 정책에 따라 적용 범위를 조절할 계획이다.