12열 그리드 뷰

개념 이해하기

전통적인 12열 grid는 컨테이너를 같은 비율의 열로 나누고 요소가 여러 열을 차지하게 합니다. CSS Grid의 repeat(12,1fr)로 직접 구현할 수 있습니다.

repeat(12, 1fr)가 .stage를 같은 폭의 열 열두 개로 나누고, .main은 span 8로 여덟 칸을, .side는 span 4로 네 칸을 차지해 한 행을 정확히 채웁니다. 차지한 범위 안의 간격 10px도 폭에 포함되므로 .main은 간격 일곱 개, .side는 세 개를 품어 실제 폭의 비율은 2:1보다 조금 더 벌어집니다. 화면 너비가 520px 이하이면 두 영역 모두 1/-1로 첫 선부터 마지막 선까지 늘어나 위아래로 쌓입니다.

1fr 열은 최소 크기가 내용의 최소 너비라서, 긴 단어나 넓은 이미지가 들어간 칸이 다른 열을 밀어내 12열의 비율이 깨질 수 있습니다. repeat(12, minmax(0, 1fr))로 적으면 모든 열이 내용과 상관없이 같은 폭을 유지합니다.