CSS Grid Lanes가 2026년 Safari 26에 정식 도입되어 JavaScript 라이브러리 없이 Pinterest 스타일 레이아웃을 네이티브 구현 가능

Context

기존 Pinterest 스타일 레이아웃 구현은 JavaScript 라이브러리, Flexbox column 트릭 등 복잡한 우회 방법이 필요했다. CSS column hack 방식은 항목 순서가 위에서 아래로 흐르는 수직 정렬을 발생시켰다. DOM 순서와 시각적 순서가 불일치하여 스크린 리더 및 키보드 탐색에 문제가 발생했다.

Technical Solution

• display: grid + grid-template-rows: masonry 구문을 적용하여 항목이 사용 가능한 공간이 가장 많은 축으로 흐르도록 설정
• @supports (grid-template-rows: masonry) 조건으로 점진적 향상 구현
• 비지원 브라우저를 위해 align-items: start가 적용된 일반 grid를 폴백으로 사용
• React 컴포넌트에서 columns 프롭(2|3|4)로 열 개수 유동적 조절
• gap: 1rem으로 항목 간 일관된 간격 확보

Impact

DOM 순서가 시각적 순서와 일치하여 접근성과 키보드 탐색 개선

Key Takeaway

새 프로젝트에서 CSS column hack을 폐기하고 @supports 기반 폴백과 함께 grid-template-rows: masonry를 우선 적용해야 한다