대시보드 파트너 카드 우측 공백을 그리드 설정 한 줄로 해결

auto-fill을 auto-fit으로 바꾼 하루

대시보드 파트너 카드 영역이 카드 2~3장만 떴을 때 우측에 휑한 공백이 남는다는 제보를 받음. 원인 찾는 데 30분, 고치는 데 한 줄. 늘 그렇듯이.

증상부터 정리

• 파트너 수 많을 때(8장+): 멀쩡하게 잘 깔림
• 파트너 수 적을 때(2~3장): 카드는 좌측에 쪼그라들고 우측이 통째로 빔
• 화면 줄여도 카드 폭은 안 늘어나고 빈 트랙만 남는 느낌

처음엔 flex 정렬 문제인 줄 알고 justify-content 만지작거렸는데 grid 컨테이너였음. 한참 헤맴.

진짜 원인: auto-fill의 동작

Grid에서 repeat(auto-fill, minmax(280px, 1fr)) 을 쓰면 컨테이너 폭이 허용하는 만큼 빈 트랙까지 미리 다 만들어둠. 카드가 부족해도 그 자리는 비워둔 채로 남음. 자리를 잡아두는 게 의도된 동작이라, 페이지네이션처럼 "곧 채워질 슬롯"이 있는 케이스라면 맞는데, 우리 대시보드는 카드가 늘어났다 줄었다 하는 영역이라 안 맞았음.

auto-fit 으로 바꾸면 빈 트랙을 폭 0으로 접어버려서 살아있는 카드들이 남은 공간을 1fr씩 나눠 가짐. 결과적으로 카드 2장만 있어도 가로로 쭉 늘어나면서 영역이 꽉 참.

// before
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

// after
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

차이를 표로 정리하면:

건드린 파일이 셋이나 된 이유

소스맵 따라가니 빌드된 통합 css가 한 곳, 대시보드 전용 scss가 한 곳, 글로벌 카드 그리드 mixin이 한 곳에 있었음. mixin만 고치면 다른 페이지도 같이 바뀌니까 위험. 그래서 mixin은 auto-fit | auto-fill 인자로 받게 살짝 일반화하고, 대시보드만 auto-fit 으로 호출하도록 했음. 통합 css는 빌드 산출물이라 손댈 필요 없었는데, 캐시 때문에 한 번 강제로 다시 떨어뜨려야 반영됨.

회고

• 한 줄짜리 fix지만 grid 명세 다시 읽고 auto-fit vs auto-fill MDN 표 한 번 더 봤음. 매번 헷갈림
• 카드 0장일 때는 auto-fit 도 의미 없음. empty state 분기는 별도로 둬야 함
• mixin에 인자로 빼둔 덕에 다음에 비슷한 영역 만나면 한 줄로 끝남

다음