CSS 그리드에서의 minmax 함수

auto-fill과 함께 minmax 함수를 지정하는 것은 매우 편리합니다. 이 함수는 열 너비의 범위를 최소값에서 최대값까지 설정합니다. 컨테이너 너비가 모든 열을 수용할 수 없으면, 일부 열이 새 줄로 이동하며, 해당 줄의 열은 그 안에 고르게 분배됩니다.

예제를 통해 살펴보겠습니다. 열 배치의 다양한 변형을 보려면 페이지 너비를 변경하세요:

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-fill, minmax(150px, 1fr));
  border: 2px solid #696989;
  padding: 10px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат: