CSS 그리드에서 auto-fit 값의 의미

이제 auto-fit 값에 대해 살펴보겠습니다. 이 값은 repeat 함수와 함께 사용하여 동일한 크기의 열을 지정할 때 적용됩니다. auto-fill 값과의 차이점은, auto-fit이 컨테이너의 사용 가능한 너비에 맞게 열 수를 조정하여 확장하거나 축소한다는 점입니다.

예시

여덟 개의 요소를 가진 컨테이너를 예로 들어 auto-fit 값의 동작을 살펴보겠습니다. 이전 강의에서 알게 된 minmax 함수를 auto-fit 값과 함께 적용해 보겠습니다:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border: 2px solid #696989;
  padding: 10px;
  width: 600px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

예시

이제 그리드 컨테이너의 너비를 400px로 줄여 보겠습니다:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

실습 문제