Grid 자동 반복 채움/맞춤

사용법

repeat() 함수의 첫번째 인자는 반복 횟수를 설정합니다. 상수 대신 변수 값으로 자동 채움(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));
}

레퍼런스

CSS Grid Layout Module Level 1www.w3.org

w3.org/TR/css-grid-1/#auto-repeat