CSS Grid로 반응형 카드 레이아웃 마이그레이션

배경

사내 대시보드의 카드 레이아웃이 float와 flexbox 조합으로 되어 있었다. 미디어 쿼리가 5개나 필요했고, 카드 개수에 따라 레이아웃이 깨지는 이슈가 종종 발생했다.

IE11 지원을 드롭하기로 결정되면서 CSS Grid 도입을 검토했다.

기존 코드

.card-container {
  display: flex;
  flex-wrap: wrap;
  margin: -10px;
}

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

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

@media (max-width: 768px) {
  .card { flex-basis: calc(100% - 20px); }
}
/* 3개의 미디어 쿼리 더... */

Grid 적용

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

이게 전부다. auto-fit과 minmax를 조합하면 컨테이너 너비에 따라 자동으로 열 개수가 조정된다. 300px은 카드의 최소 너비이고, 공간이 있으면 1fr씩 균등 분배된다.

주의사항

auto-fill과 auto-fit의 차이를 명확히 이해해야 한다. auto-fill은 남는 공간에 빈 트랙을 생성하지만, auto-fit은 빈 트랙을 collapse 시킨다. 우리 케이스에서는 카드가 적을 때 늘어나는 게 자연스러워서 auto-fit을 선택했다.

카드 내부 콘텐츠 높이가 다를 때는 align-items: start로 상단 정렬하는 게 깔끔했다.

결과

• CSS 코드 60% 감소
• 미디어 쿼리 제거
• 다양한 해상도에서 자연스러운 레이아웃
• 유지보수 포인트 감소

CSS Grid는 2D 레이아웃에서 flexbox보다 명확하고 간결한 코드를 만들어준다. 브라우저 지원만 된다면 적극 사용할 만하다.