상품이나 포트폴리오 같은 카드 목록을 반응형으로 정렬할 때, 화면 폭마다 미디어쿼리로 3열, 2열, 1열을 따로 지정하고 계신다면 CSS grid의 auto-fill과 minmax 한 줄로 바꿀 수 있습니다.
카드가 들어갈 자리가 있으면 알아서 열이 늘고, 좁아지면 줄어듭니다.

1. 기본 코드: 카드 최소 폭만 정해 주기

핵심은 repeat(auto-fill, minmax(최소폭, 1fr))입니다. 카드가 240px보다 좁아지지 않는 선에서 들어갈 수 있는 만큼 열을 만들고, 남는 공간은 1fr로 똑같이 나눠 가집니다.

/* 카드 목록 부모에 적용 */
.card-list {
  display: grid;
  grid-template-columns:
    repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
}

/* 카드에는 폭을 주지 않습니다 */
.card-list > li {
  min-width: 0;
}

카드에 width나 float를 남겨 두면 grid 계산과 충돌하니 예전 코드에서 넘어올 때는 꼭 지워 주세요. 카드 안에 긴 영문이나 표가 있으면 열이 밀릴 수 있어 min-width: 0을 같이 넣어 두는 편이 안전합니다.

2. auto-fill과 auto-fit, 무엇을 고를까

둘은 카드가 적어서 한 줄이 다 차지 않을 때만 차이가 납니다.

게시판 목록이나 상품 목록처럼 개수가 바뀌는 곳은 auto-fill이 무난합니다. 검색 결과가 1개일 때 카드 하나가 화면 전체로 늘어나는 모습은 생각보다 어색합니다. 반대로 항상 개수가 정해진 서비스 소개 카드 3개 같은 곳은 auto-fit이 꽉 차 보여서 잘 어울립니다.

3. 작은 화면에서 가로 스크롤이 생길 때

최소 폭을 300px처럼 크게 잡으면 폭 320px 휴대폰에서 좌우 여백을 빼고 남는 공간이 그보다 작아져 카드가 화면 밖으로 튀어나옵니다. 이때는 min()으로 부모 폭보다 커지지 않게 막아 줍니다.

.card-list {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(min(300px, 100%), 1fr)
  );
  gap: 24px;
}

이렇게 하면 넓은 화면에서는 300px 기준으로 열이 나뉘고, 그보다 좁은 화면에서는 카드가 부모 폭에 맞춰 한 줄에 하나씩 들어갑니다. 최대 열 수를 제한하고 싶다면 부모에 max-width를 주는 쪽이 코드가 단순합니다.