10장. Grid를 선택하는 기준

Grid는 행과 열을 함께 설계하고 item을 track에 배치한다. fr은 남은 공간의 비율이지 전체 폭의 단순 비율이 아니다. minmax(0,1fr)는 콘텐츠 최소 크기 때문에 track이 넘치는 문제를 제어한다.

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

auto-fit과 auto-fill의 빈 track 처리 차이를 카드 목록으로 비교한다. “한 줄에 3개”가 제품 요구라면 명시하고, “최소 카드 폭이 확보되는 만큼”이면 repeat(auto-fit,minmax(...))가 어울린다.

grid area 이름은 화면 구조를 읽기 쉽게 하지만 DOM 의미를 대신하지 않는다. 실제 reading order가 먼저다.