파트너 정산 카드 빈공간을 반응형 그리드로 해결

빈공간이 거슬려서 시작한 작업

이커머스 대시보드에 파트너별 정산 요약 카드를 띄워두는데, 화면 우측에 빈공간이 한참 남아있는 게 영 꼴보기 싫었음. 파트너가 5명일 때나 12명일 때나 카드가 같은 폭으로 박혀서, 적을 땐 넉넉하지 못하고 많을 땐 답답했음.

원인은 단순했음. 그리드를 고정 컬럼 수(4열)로 박아둔 거였음. 화면이 넓어도 카드는 안 늘어나고, 좁아지면 줄바꿈만 일어나는 식.

어떻게 고쳤나

CSS Grid의 auto-fit + minmax로 전환. 카드 최소 폭만 정해두면 컨테이너 폭에 맞춰 컬럼 수가 자동 조정됨.

.partner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

핵심 포인트:

• auto-fit: 빈 트랙을 0으로 접어버려서 카드가 남은 공간을 균등하게 차지
• auto-fill이 아닌 이유: 빈 셀을 유지해서 우측에 또 빈공간이 생김
• minmax(240px, 1fr): 최소 240px 보장, 최대는 남은 공간 균등 분배

auto-fit vs auto-fill

이거 한 줄 차이로 시각적 결과가 완전히 달라짐. 처음엔 auto-fill로 짰다가 빈공간이 그대로 남아서 다시 갈아엎었음.

케이스별 컬럼 수

모바일은 미디어쿼리 한 줄로 강제 1열 처리. minmax 최소값(240px)이 모바일 폭보다 작아도 시각적으로 너무 좁게 잘려서 가독성이 깨졌음.

@media (max-width: 480px) {
  .partner-grid { grid-template-columns: 1fr; }
}

회고

• 30분이면 끝나는 작업인데 미루고 미뤘던 게 본인 문제였음. 화면 들어갈 때마다 거슬리면서도 "다음 스프린트에" 하다가 결국 컴플레인 들어와서 부랴부랴 처리함
• 작은 시각적 디테일이 신뢰도에 생각보다 크게 영향 줌. "관리 안 되는 것 같다"는 인상을 빈공간 하나가 줘버림
• CSS만 만지는 작업이라도 PR 올리기 전에 카드 0개/1개/12개/50개 케이스 다 확인하는 습관은 유지하는 중

다음