CSS Grid Layout 실전 적용기

배경

사내 대시보드 프로젝트에서 복잡한 카드 레이아웃을 구현해야 했다. 기존에는 Flexbox와 calc()를 조합해 구현했는데, 미디어쿼리마다 계산식이 달라져 유지보수가 어려웠다.

이번 프로젝트는 IE11 지원이 필요 없어서 CSS Grid를 시도해봤다.

기존 Flexbox 방식

.card-container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  width: calc(33.333% - 20px);
  margin: 10px;
}

@media (max-width: 768px) {
  .card {
    width: calc(50% - 20px);
  }
}

여백 계산이 번거롭고, 카드 순서 변경도 JavaScript가 필요했다.

Grid 적용

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

.featured-card {
  grid-column: span 2;
}

코드가 절반으로 줄었고, gap 속성으로 여백 처리가 깔끔해졌다. auto-fill과 minmax로 반응형도 자동으로 해결됐다.

주의사항

• Safari 10.1+에서 지원하므로 caniuse 확인 필수
• autoprefixer 설정으로 -ms- 접두사 자동 추가
• 복잡한 레이아웃은 grid-template-areas 활용

결론

IE11 지원이 없는 프로젝트라면 Grid를 적극 사용할 만하다. Flexbox는 1차원 레이아웃에, Grid는 2차원 레이아웃에 적합하다는 것을 체감했다.