track 크기를 px, %, fr, minmax로 정의합니다.
fr은 남은 공간의 비율을 나눕니다. minmax는 최소와 최대 track 크기를 정하고 repeat는 반복 정의를 줄여 줍니다.
열은 첫째가 120px로 고정되고, .stage 너비에서 그 120px와 간격 두 개 16px를 뺀 나머지를 2fr과 1fr이 2:1로 나눕니다. 이 실습 폭에서는 둘째 열이 약 244px, 셋째 열이 약 122px입니다. A, B, C가 70px 높이의 첫 행을 채우고 D는 100px인 둘째 행의 첫 칸으로 내려가며, 그 행의 나머지 두 칸은 비어 있습니다.
행 높이를 70px처럼 고정하면 글이 늘어나도 칸이 커지지 않아 내용이 아래로 넘치고, 글자 확대나 번역처럼 내용이 길어지는 상황을 견디지 못합니다. minmax(70px, auto)로 적으면 최소 70px를 지키면서 내용이 많을 때는 행이 함께 자랍니다.
1fr 자식의 긴 콘텐츠가 넘칠 때 minmax(0,1fr)가 필요한 경우가 있습니다.
직접 바꿔보세요첫 열을 120px에서 minmax(80px,1fr)로 바꾸세요.