12열 기반의 비율형 레이아웃 원리를 배웁니다.
전통적인 12열 grid는 컨테이너를 같은 비율의 열로 나누고 요소가 여러 열을 차지하게 합니다. CSS Grid의 repeat(12,1fr)로 직접 구현할 수 있습니다.
이번 예제의 출발점은 grid-template-columns:repeat(12,1fr);입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 main과 side를 각각 9열, 3열로 바꾸세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
모든 요소를 12열 숫자에 억지로 맞추면 단순한 레이아웃도 복잡해집니다.
직접 바꿔보세요main과 side를 각각 9열, 3열로 바꾸세요.