grid-template-columns: repeat(3, 1fr) 라고 쓰면 세 칸이 정확히 3분의 1씩 나눠 갖는다고 읽히지만, 실제 규격은 그렇게 약속하지 않습니다. 1fr 은 minmax(auto, 1fr) 의 줄임말이고, 이때 최솟값 auto 는 그 칸이 가진 내용의 최소 폭으로 해석됩니다.
1fr 이 약속하지 않는 것
내용의 최소 폭은 “더 이상 줄바꿈할 수 없는 가장 넓은 덩어리” 입니다. 문단이라면 가장 긴 단어 하나지만, 줄바꿈이 되지 않는 것이 들어 있으면 이야기가 달라집니다. 칸은 그 덩어리보다 좁아지지 않으므로, 자기 몫인 3분의 1을 넘어 이웃 칸의 자리를 빼앗고, 그래도 모자라면 판 전체를 화면 밖으로 밀어냅니다.
이것이 모바일 전용 문제라고 오해하기 쉽지만 그렇지 않습니다. 데스크톱의 다중 칸 그리드에서도 똑같이 일어나고, 오히려 칸이 좁게 나뉘는 넓은 화면에서 더 잘 드러납니다.
고치는 세 줄
첫째, 트랙의 최솟값을 직접 0 으로 내립니다. grid-template-columns: repeat(3, minmax(0, 1fr)); 이라고 쓰면 칸은 내용과 무관하게 자기 몫만 가져갑니다. 넘치는 내용은 칸 안에서 처리할 문제가 되고, 배치는 더 이상 흔들리지 않습니다.
둘째, 플렉스에도 같은 함정이 있습니다. 플렉스 자식의 min-width 기본값이 auto 라서 똑같이 줄어들지 않습니다. 자식에 min-width: 0(세로 방향이면 min-height: 0)을 주는 것이 대응하는 처방입니다.
셋째, 넘치는 내용 자체를 다룹니다. 코드 블록에는 pre { overflow-x: auto; } 를 주어 자기 상자 안에서 가로 스크롤되게 하고, 긴 문자열에는 overflow-wrap: anywhere 를 씁니다.
자동 배치에도 같은 함정이 있습니다
칸 수를 자동으로 정하는 repeat(auto-fit, minmax(18rem, 1fr)) 은 편리하지만, 화면 폭이 18rem 보다 좁아지면 최솟값 자체가 화면보다 커져 가로 스크롤이 생깁니다. repeat(auto-fit, minmax(min(18rem, 100%), 1fr)) 로 쓰면 좁은 화면에서 최솟값이 100% 로 낮아져 이 문제가 사라집니다.
정리하면 규칙은 하나입니다 — 트랙의 최솟값을 우연에 맡기지 않습니다. 이 습관 하나가 “왜 여기만 판이 밀렸지” 라는 종류의 디버깅을 대부분 없앱니다.
테마의 그리드 구조를 손보는 이야기는 테마 · 플러그인 아카이브에 이어지고, 사이트 전반의 화면 · 성능 정비는 최적화 지원 사업에서 함께 다룹니다.
다음 회차
그런데 판이 밀렸는데도 브라우저가 알려주는 숫자는 멀쩡한 경우가 있습니다. 다음 회차는 가로 스크롤 범인을 실제로 찾아내는 방법입니다.