[CSS] Grid layout #3

minmax

브라우저의 크기를 조절할 때 grid 안에 들어있는 item들의 최소 크기, 최대 크기를 정한다.

/* minmax로 최소 100px, 최대 1fr의 크기 지정 */
grid-template-columns: repeat(10, minmax(100px, 1fr));

auto-fill, auto-fit

auto-fill
정해진 크기 안에서 가능한 한 많은 빈 column(row)를 만들어냄.

grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));

auto-fit
현재 element를 늘려서 column(row)에 딱 맞게(fit) 해줌

grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

auto-fit, auto-fill은 repeat 함수 내부에서만 동작함

max-content, min-content

max-content
content의 크기만큼 cell의 크기를 늘림

min-content
content의 크기를 최대한 줄여 cell의 크기를 줄임