RAM (반복, 자동, 최소 최대)

이 일곱 번째 예에서는 이미 학습한 개념을 결합하여 자동으로 배치되고 유연한 하위 요소가 있는 반응형 레이아웃을 만듭니다. 정말 깔끔합니다. 여기서 기억해야 할 핵심 용어는 repeat, auto-(fit|fill), minmax()이며 약어 RAM으로 기억할 수 있습니다.

모두 합치면 다음과 같습니다.

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

다시 repeat()를 사용하지만 이번에는 명시적인 숫자 값 대신 auto-fit 키워드를 사용합니다. 이렇게 하면 이러한 하위 요소를 자동으로 배치할 수 있습니다. 이러한 하위 요소는 기본 최솟값 150px와 최댓값 1fr입니다. 즉, 작은 화면에서는 전체 1fr 너비를 차지하며 각각 너비 150px에 도달하면 같은 선으로 흐르기 시작합니다.

auto-fit의 경우 완전히 비어 있는 트랙은 0로 축소되고 채워진 트랙이 커져서 공간을 차지합니다. 그러나 이를 auto-fill로 변경하면 빈 트랙이 채워진 경우와 동일한 공간을 차지합니다.

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

HTML

<div class="parent white">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
  </div>
  

CSS

        .parent {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}