minmax()
1fr의 길이는 설정된 전체 너비가 줄어들면 같이 줄어들게되는데,
이때 최소 길이를 지정해 줄 수 있는 함수가 minmax() 함수이다.
.grid {
display: grid;
grid-template-columns: repeat( 12, minmax(250px, 1fr) );
}위와 같이 작성하면 설정된 전체 너비가 줄어들더라도 셀의 너비가 250px 이하로는 작아지지 않는다.
auto-fill / auto-fit
auto-fill과 auto-fit은 repeat() 함수와 함께 사용된다.
repeat()함수의 파라미터로 열 또는 행의 개수를 미리 지정해 주지 않고, 설정된 너비가 허용하는 한 최대한 셀을 채우게 된다.
auto-fill
설정된 너비에서 가능한 많은 셀들을 만들어 내려고 한다.
겉으로 보기에는 빈 공간이 있더라도 셀의 길이를 늘리지 않는다.
auto-fit
빈 공간을 셀들이 나누어 가져서 딱 맞게 길이를 설정한다.
겉으로 보기에는 셀의 길이를 전체 너비에 맞게 늘린다.
