Minmax

만약 다음과 같이 element가 배치되었다고 보자

.grid {
  color: white;
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(4, 100px);
  grid-auto-columns: 100px;
}
.item:nth-child(odd) {
  background-color: #2ecc71;
}
.item:nth-child(even) {
  background-color: #3498db;
}

<div class="grid">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
</div>

만약 우리가 화면의 크기를 줄인다고 하면 다음과 같이 될꺼다

위의 현상은 1fr로 설정된 column의 넓이가 적용되어서 생긴 현상이다. (1fr은 현재 공간에서 element갯수만큼 나누어 element의 길이를 결정해주는 속성이기 때문.) 하지만 우리는 element가 줄어들지않고 길이를 유지하고 싶다. 이때 사용하는 것이 minmax함수이고 다음과 같이 사용한다.

• minmax(min, max);

minmax함수는 길이가 들어가는 속성에 사용해야하는 규칙이 있다. 그리고 minmax를 사용하면(최소 길이를 유지하기위한 코드) 아래 그림처럼 된다.

.grid {
  color: white;
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(10, minmax(100px, 1fr));
  grid-template-rows: repeat(4, 100px);
  grid-auto-columns: 100px;
}

길이를 유지한체 화면 가로로 스크롤바가 생겼다! 또한 반대로 화면이 길어지면 1fr로 element 길이가 길어진다.

grid-template-rows에도 적용할 수가 있다. 하지만 row는 column과 다르게 grid-auto-rows도 minmax를 grid-template-rows과 똑같이 적용해야 같은 효과를 볼 수 있다.

auto-fit auto-fill

auto-fit, auto-fill는 repeat함수에만 사용할 거다.

.grid:first-child {
  grid-template-columns: repeat(5, minmax(100px, 1fr));
}
.grid:last-child {
  grid-template-columns: repeat(5, minmax(100px, 1fr));
}

그리고 fill과 fit의 차이점을 알기위해 repeat 함수안에 매개변수를 아래와 같이 바꾼다.

.grid:first-child {
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
.grid:last-child {
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}