CSS Grid로 반응형 카드 레이아웃 구현하기

문제 상황

대시보드 프로젝트에서 카드형 레이아웃을 구현하는데, 기존 Flexbox 방식은 마지막 행 정렬 문제와 복잡한 미디어 쿼리 때문에 유지보수가 어려웠다.

해결 방법

CSS Grid의 auto-fit과 minmax를 조합하면 미디어 쿼리 없이도 반응형 구현이 가능했다.

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

.card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

• auto-fit: 컨테이너 너비에 맞춰 자동으로 열 개수 조정
• minmax(280px, 1fr): 카드 최소 너비 280px, 남은 공간은 균등 분배
• gap: 마진 대신 간격 처리로 코드 단순화

결과

브라우저 너비에 따라 자연스럽게 1~4열로 변경되고, 마지막 행의 카드도 일정한 너비를 유지했다. IE11 지원이 필요한 페이지는 여전히 Flexbox를 사용하지만, 모던 브라우저 대상 페이지는 Grid로 전환 중이다.

추가 팁

auto-fill과 auto-fit의 차이를 이해하는 게 중요했다. auto-fill은 빈 공간에도 열을 생성하지만, auto-fit은 실제 아이템에 맞춰 공간을 채운다. 우리 케이스엔 auto-fit이 적합했다.