grid

min-content, max-content

content 크기에 따라 부모컨테이너 조절하고 싶을 때 쓰인다

max-content : content의 크기만큼 cell 크기를 정한다
min-content : content가 작아질 수 있는 만큼 cell 크기를 정한다

반응형 디자인 - repeat과 함께 쓰기

grid-template-columns: repeat(5, minmax(max-content, 1fr));

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