track 크기를 px, %, fr, minmax로 정의합니다.
fr은 남은 공간의 비율을 나눕니다. minmax는 최소와 최대 track 크기를 정하고 repeat는 반복 정의를 줄여 줍니다.
이번 예제의 출발점은 grid-template-columns:180px minmax(0,1fr);입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 첫 열을 120px에서 minmax(80px,1fr)로 바꾸세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
1fr 자식의 긴 콘텐츠가 넘칠 때 minmax(0,1fr)가 필요한 경우가 있습니다.
직접 바꿔보세요첫 열을 120px에서 minmax(80px,1fr)로 바꾸세요.