함수의 첫번째 인자는 반복 횟수를 설정합니다. 상수 대신 변수 값으로 자동 채움(auto-fill)을 설정하면 컨테이너 영역을 자동으로 반복하여 채웁니다. 반면 자동 맞춤(auto-fit)으로 설정하면 그리드 컨테이너 내부에 빈 트랙이 존재할 경우 그 공간을 나눠 맞춥니다.
.grid-container {
display: grid;
/* 자동 채우기(auto-fill)
채움(fill)은 반복 횟수 주어질 경우, 크기 또는 최소, 최대 크기 만큼
계산하여 처리하지만 정해진 수 이상은 처리하지 않습니다. */
grid-template-columns: repeat(auto-fill, 1fr 2fr);
/* 자동 채우기(auto-fit)
맞춤(fit)은 채움과 유사하게 작동하지만, 그리드 내부에 빈 트랙이 존재할 경우
반복 횟수만큼 반복된 트랙을 빈 트랙 공간을 나눠 핏팅(fitting)합니다. */
grid-template-rows: repeat(auto-fit, minmax(80px, auto));
}
