CSS Grid Lanes: Safari의 네이티브 masonry 레이아웃

크기가 제각각인 항목들이 비어 있는 공간으로 흘러 들어가 어긋나게 배치되는 Pinterest 스타일의 그리드, 바로 masonry 레이아웃은 JavaScript 라이브러리와 float, 그리고 거의 작동하는 듯하다가 결정적인 순간에 무너지는 Flexbox 꼼수에 기대어 10년 넘게 프로덕션에서 쓰여 왔습니다.¹ WWDC 2026에서 Apple의 Safari 팀은 이를 위한 네이티브 레이아웃 모드를 웹에 선사했습니다. 바로 CSS Grid Lanes입니다. masonry라는 패턴 자체는 오래되었습니다. 새로운 것은 그것을 단 세 줄로 만들어 내는 일급 CSS display type, 그리고 masonry가 고질적으로 안고 있던 탭 순서 및 접근성 문제를 해결하는 flow-tolerance 다이얼입니다. Grid Lanes는 현재 Safari 26.4에서 사용할 수 있으며, 다른 브라우저에서는 플래그 뒤에서 쓸 수 있습니다.¹

TL;DR

• Grid Lanes는 Grid와 Flexbox 사이에 자리한 새로운 CSS 레이아웃 모드입니다. 한 축만 구조화하고 나머지 축은 자유롭게 두며, 콘텐츠를 여러 lane으로 분배해 각 항목 본연의 비율을 유지한 채 빈틈없이 어긋나게 채워진 레이아웃을 만들어 냅니다.¹
• 전체가 세 줄입니다. display: grid-lanes, fr 트랙을 사용한 grid-template-columns, 그리고 gap입니다. grid-template-columns를 grid-template-rows로 바꾸면 폭포처럼 흐르던 세로 흐름이 벽돌 벽 같은 가로 흐름으로 바뀝니다. 방향은 한쪽만 선택할 수 있으며, 둘 다는 안 됩니다.¹
• 트랙 크기 지정은 Grid에서 그대로 이어집니다. 불균등한 fr 비율, 반응형 열 개수를 위한 minmax()를 곁들인 auto-fill, 그리고 좁은 열과 넓은 열을 반복하는 패턴 등입니다.¹
• 항목에는 이미 익숙한 Grid 속성을 사용합니다. 폭을 넓히는 grid-column: span 2, 명시적인 열 배치, 그리고 카드의 콘텐츠를 부모 레이아웃에 접어 넣는 grid-template-columns: subgrid입니다. 제어할 수 있는 것은 열 배치이며 행은 아닙니다. 행은 Grid Lanes가 정합니다.¹
• flow-tolerance야말로 결정적인 차별점입니다. 순수하게 가장 짧은 열에만 배치하면 탭 순서가 시각적 순서를 거슬러 지그재그가 되어 접근성을 해칠 수 있습니다. flow-tolerance(기본값 1em)는 최단 열 규칙을 느슨하게 풀어 배치가 읽기 순서를 더 가깝게 따르도록 합니다.¹
• 제공 현황은 솔직하게 밝힙니다. Safari 26.4는 현재 이를 탑재하고 있지만, 다른 브라우저는 플래그 뒤에 두고 있습니다. Grid Lanes는 아직 크로스 브라우저 GA가 아닙니다.¹

Grid Lanes가 Grid와 Flexbox 사이에 자리하는 이유

Safari 팀의 Brandon이 3:39부터 Grid Lanes 레이아웃을 처음부터 만들어 갑니다.

모든 레이아웃 모드는 똑같은 두 가지 질문에 답합니다. 항목은 어디에 놓이는가, 그리고 얼마만큼의 공간을 얻는가입니다.¹ Flexbox와 Grid는 이 질문들에 서로 다르게 답하며, Grid Lanes는 그 중간에 내려앉습니다.

Flexbox는 한 축과, 그 축을 따라 흐르는 항목들의 단일 lane을 제공합니다. 항목이 줄바꿈될 때도 선택한 방향, 즉 행 또는 열로 계속 흘러갑니다.¹ Grid는 두 축, 곧 열과 행을 제공하고, 그 트랙들이 교차하는 셀에 항목을 배치합니다. 문제가 드러나는 것은 항목들의 종횡비가 다를 때입니다. 키가 작은 항목이 셀을 채우지 못해 커다란 빈 영역이 생깁니다.¹ 이미지의 경우, 여기서 남는 선택지는 모두 좋지 않습니다. 각 이미지를 셀에 꽉 차게 늘이면 왜곡되고, 공간을 채우려고 확대하면 컨테이너 밖으로 넘치며, 잘라 내면 중요한 정보를 잃을 위험이 있습니다.¹

Grid Lanes는 이 긴장을 해소합니다. 세션의 표현을 빌리면, “이것은 Grid와 Flex 사이에 위치합니다. Grid처럼 두 차원에 걸쳐 구조화하는 대신, 한 차원만 구조화하고 나머지는 자유롭게 둡니다. 다만 콘텐츠가 단일 lane을 따라 흐르며 페이지 아래로 줄바꿈되는 Flex와 달리, Grid Lanes는 콘텐츠를 여러 lane으로 분배합니다.”¹ 항목들은 하나씩 배치되며, 각 항목은 자신을 가장 위에 가깝게 두는 열에 자리 잡습니다. 그래서 앞선 항목일수록 위에 놓이고, 뒤따르는 항목들이 그 아래를 채워 갑니다.¹ 이 레이아웃은 이미지뿐 아니라 어떤 콘텐츠와도 잘 작동합니다. 텍스트 블록은 열에 맞게 줄바꿈되고 브라우저가 높이를 정하며, 헤드라인은 여러 열에 걸쳐 두드러지게 만들 수도 있습니다.¹

세 줄의 CSS로 구현하는 네이티브 masonry

작업은 새로운 display type에서 시작한 다음, Grid와 똑같은 방식으로 트랙을 정의합니다.

.gallery {
  display: grid-lanes;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

grid-template-columns는 트랙의 개수와 각 트랙의 폭을 설정합니다. fr 단위(“fractional unit”)는 컨테이너 안에서 쓸 수 있는 공간을 가져와 그것을 분수로 나누라고 브라우저에 지시합니다. 그래서 1fr 1fr 1fr은 동일한 크기의 열 세 개를 만들고, gap은 Grid에서와 똑같이 간격을 더합니다.¹ 폭포를 벽돌 벽으로 바꾸려면 열을 행으로 바꾸면 됩니다. grid-template-columns를 grid-template-rows로 교체하면 항목들이 열을 따라 아래로 내려가는 대신 행을 따라 가로로 흘러갑니다. 한 가지 유의점은 세션의 말 그대로 “방향은 한쪽만 선택할 수 있으며, 둘 다는 안 된다”는 것입니다.¹

이 세 줄은 보기보다 더 많은 제어를 제공합니다. 열이 반드시 동일할 필요는 없어서, 가운데 열이 양옆 이웃의 두 배 공간을 차지할 수도 있습니다. 열 개수를 직접 고정하는 대신, 반응형 Grid 레이아웃이 이미 그러듯이 브라우저가 정하도록 맡길 수도 있습니다.

.gallery {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

auto-fill은 들어갈 수 있는 만큼 열을 만들고, minmax()는 각 열이 최소 200픽셀이되 공간을 채우기 위해 더 커질 수 있다고 지정합니다.¹ 같은 발상을 더 밀고 나가 좁은 열과 넓은 열을 반복하는 패턴으로 만들 수도 있습니다. Brandon이 꼽는 매력은 이렇습니다. “제가 가장 좋아하는 점은 단 몇 줄의 CSS로 이렇게 많은 것을 할 수 있다는 것입니다.”¹

이미 아는 Grid 속성으로 개별 항목 다듬기

Grid Lanes는 이미 Grid에 존재하는 속성으로 항목을 다듬습니다. 동일한 크기의 열 세 개를 가진 grid-lanes 컨테이너에서 시작해 봅시다. 한 항목에 더 많은 공간을 주려면 grid-column: span 2로 그 항목을 두 열에 걸쳐 늘이면, 나머지 레이아웃이 그 주위로 조정됩니다.¹ 항목을 정확히 배치할 수도 있습니다. 열 2에서 시작해 열 2와 열 3에 걸치도록 설정하는 것입니다. 이 제약은 의도된 것입니다. “열 배치는 제어할 수 있지만 행은 제어할 수 없습니다. 행은 Grid Lanes가 대신 정해 줍니다.”¹

subgrid는 중첩된 컴포넌트의 콘텐츠를 부모에 접어 넣습니다. 두 열에 걸친 레시피 카드에는 이미지와 약간의 텍스트가 있는데, 기본적으로 이들은 Grid Lanes 레이아웃에 참여하지 않습니다. 그 카드에 display: grid-lanes와 grid-template-columns: subgrid를 더하면 “그 콘텐츠가 각자의 항목으로서 부모 레이아웃에 합류”합니다. 이미지가 한 열을 차지하고 텍스트가 다른 열을 차지하며, 각각 자신의 콘텐츠에 맞게 크기가 정해집니다.¹ 중첩은 어느 방향으로든 가능합니다. Grid Lanes 컨테이너 안에 일반 그리드를 넣을 수도, 그 반대도 가능합니다. 동일한 도구와 문법이 그대로 이어지기 때문입니다.¹

flow-tolerance 다이얼: 접근성 해법

여기서부터가 Grid Lanes를 단지 더 깔끔한 masonry 이상으로 만들어 주는 부분입니다. 순수한 최단 열 배치는 대부분 아주 보기 좋지만, 가끔은 어딘가 딱 맞아떨어지지 않는 느낌이 들 때가 있고, 그 이유는 접근성에 있습니다.¹

거의 같은 높이로 한 줄에 놓인 두 항목을 떠올려 봅시다. 항목 2는 항목 1보다 몇 픽셀 더 낮습니다. 항목 2 아래의 영역이 더 위에 가깝기 때문에, 브라우저는 다음 항목을 그곳에 놓고 항목 4가 첫 번째 열을 채웁니다. 시각적 결과는 첫 행에서는 왼쪽에서 오른쪽으로, 마지막 행에서는 오른쪽에서 왼쪽으로 읽히게 됩니다. 세션은 이렇게 말합니다. “탭 순서와 콘텐츠가 시각적으로 나타나는 순서의 차이는 사람들의 접근성에 영향을 미치고 혼란스러운 경험을 만들어 낼 수 있습니다.”¹ 탭 순서는 소스 순서를 따르지만, 지그재그한 시각적 배치는 키보드와 스크린 리더 사용자가 의지하는 대응 관계를 깨뜨립니다.

flow-tolerance는 최단 열 규칙을 느슨하게 하거나 단단히 조이는 다이얼입니다.¹ 이것을 켜면 브라우저는 새로운 항목마다 이렇게 묻습니다. “키가 더 큰 열이 키가 더 작은 열에 flow-tolerance를 더한 값보다 작은가?”¹ 차이가 허용 범위 안이면, 항목은 배치를 읽기 순서에 맞게 유지해 주는 열을 채웁니다. 차이가 무시하기 어려울 만큼 커지면, 항목은 진짜로 키가 작은 열로 떨어집니다. 기본값은 1em입니다.

.gallery {
  display: grid-lanes;
  grid-template-columns: 1fr 1fr;
  flow-tolerance: 1em;
}

Apple의 지침은 “여러 flow-tolerance 값을 시도해 자신의 콘텐츠에 맞는 값을 찾아보라”는 것입니다.¹ 브라우저에 유연성을 주는 데에는 이면이 있어서, 결과가 가끔 예상을 벗어날 수 있습니다. 그럴 때 Web Inspector는 Grid Lanes를 완벽하게 지원합니다. 오버레이를 켜면 열과 행을 나타내는 선, 각 항목 위에 투영된 순서 번호(배치가 정확히 어떻게 일어났는지 볼 수 있습니다), 그리고 항목들 사이에 그려진 간격을 얻을 수 있습니다.¹

핵심 요약

프런트엔드 개발자를 위해: - JavaScript masonry 라이브러리와 Flexbox 꼼수를 display: grid-lanes, 세 개의 fr 트랙, 그리고 gap으로 교체하세요. 이미 익숙한 Grid 트랙 크기 지정 도구(auto-fill, minmax(), 불균등한 fr)는 그대로 재사용할 수 있습니다.¹ - 항목을 돋보이게 하려면 grid-column: span N과 명시적 열 배치를, 중첩된 카드 콘텐츠를 부모 레이아웃에 접어 넣으려면 grid-template-columns: subgrid를 활용하세요.¹

접근성을 중시하는 팀을 위해: - flow-tolerance(기본값 1em)를 조정해 시각적 배치가 소스 순서와 탭 순서를 따르도록 하여, 지그재그한 masonry 배치가 키보드와 스크린 리더 사용자에게 벌려 놓는 간극을 메우세요.¹ - 배치는 Web Inspector의 Grid Lanes 오버레이로 검증하세요. 이 오버레이는 항목 순서 번호를 레이아웃 위에 직접 투영합니다.¹

도입을 계획하는 기술 리드를 위해: - Grid Lanes는 “Safari 26.4에서 사용 가능, 그 외에는 플래그 처리, 크로스 브라우저 GA는 아님”으로 다루세요. 점진적 향상으로 도입하고, 아직 플래그 뒤에 있는 브라우저를 위한 우아한 폴백을 마련하세요.¹

FAQ

CSS Grid Lanes란 무엇인가요?

CSS Grid Lanes는 masonry 스타일의 레이아웃을 네이티브로 구축하기 위해 Safari 팀이 WWDC 2026에서 선보인 새로운 레이아웃 모드입니다. Grid와 Flexbox 사이에 자리하며, 한 축을 구조화하고 나머지는 자유롭게 두고, 항목을 여러 lane으로 분배해 각 항목 본연의 비율을 유지한 채 빈틈없이 어긋나게 채워진 레이아웃을 만들어 냅니다.¹

Grid Lanes로 masonry 레이아웃을 어떻게 만드나요?

세 줄의 CSS입니다. display: grid-lanes를 설정하고, fr 단위를 사용한 grid-template-columns로 트랙을 정의하며(예를 들어 동일한 크기의 열 세 개라면 1fr 1fr 1fr), gap을 더합니다. grid-template-columns를 grid-template-rows로 바꾸면 세로 폭포가 가로 벽돌 벽으로 변합니다. 방향은 한쪽만 선택할 수 있으며, 둘 다는 안 됩니다.¹

flow-tolerance는 무엇을 하나요?

flow-tolerance는 각 항목을 가장 짧은 열에 배치하는 규칙을 느슨하게 하거나 단단히 조입니다. 순수한 최단 열 배치는 시각적 순서를 탭 순서로부터 지그재그하게 떼어 놓아 접근성을 해칠 수 있습니다. flow-tolerance를 켜면, 브라우저는 배치를 결정하기 전에 키가 더 큰 열이 키가 더 작은 열에 허용값을 더한 것보다 작은지 확인하고, 높이 차이가 너무 커지기 전까지 항목을 읽기 순서에 맞게 유지합니다. 기본값은 1em입니다.¹

지금 당장 프로덕션에서 Grid Lanes를 쓸 수 있나요?

Safari 26.4에서는 현재 사용할 수 있습니다. 다른 브라우저는 플래그 뒤에 두고 있어서, Grid Lanes는 아직 크로스 브라우저 GA가 아닙니다. 점진적 향상으로 도입하고, 여전히 플래그를 요구하는 브라우저를 위한 폴백을 함께 제공하세요.¹

Grid Lanes는 제가 이미 아는 Grid 속성과 함께 작동하나요?

네. 항목 단위의 배치에는 기존 Grid 속성을 사용합니다. grid-column: span 2는 항목의 폭을 넓히고, 명시적 열 배치는 그 위치를 정하며, grid-template-columns: subgrid는 중첩된 컴포넌트의 콘텐츠를 부모 레이아웃에 접어 넣습니다. 제어할 수 있는 것은 열 배치이며, 행은 Grid Lanes가 정합니다.¹

직접 만들기 시작한 뒤 참고할 실전 자료로, WebKit은 gridlanes.webkit.org에서 공식 Grid Lanes 필드 가이드를 운영합니다. 패널은 Grid Lanes가 새로운 커스터마이즈 가능한 select와 함께 어우러진다는 점을 짚었습니다. masonry 레이아웃이 ::picker(select) 드롭다운 안에서도 작동하는 것입니다.²

Grid Lanes는 의존성을 더하는 대신 없애 주는 종류의 플랫폼 추가 기능입니다. 이것이 바로 노빌드 선언의 논지 그 자체이며, Lighthouse 만점 기록에 담긴 것과 같은 결과로 이어지는 직통 경로이기도 합니다. JavaScript로 렌더링하는 그리드 대신 네이티브의 시맨틱 레이아웃을 제공하는 것은 마크업을 기계에도 읽기 쉽게 유지해 줍니다. 이는 HTML은 에이전트가 원하는 포맷에서 펼친 주장입니다. 시리즈 전체의 허브는 Apple Ecosystem 시리즈입니다.

참고 문헌