# CSS Grid Lanes

> Clean Markdown view of GeekNews topic #25205. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=25205](https://news.hada.io/topic?id=25205)
- GeekNews Markdown: [https://news.hada.io/topic/25205.md](https://news.hada.io/topic/25205.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2025-12-20T21:32:51+09:00
- Updated: 2025-12-20T21:32:51+09:00
- Original source: [webkit.org](https://webkit.org/blog/17660/introducing-css-grid-lanes/)
- Points: 6
- Comments: 2

## Summary

**CSS Grid Lanes**는 웹에서 **masonry 스타일 레이아웃**을 네이티브 CSS로 구현할 수 있게 하는 새로운 디스플레이 모드입니다. `display: grid-lanes` 속성을 사용하면 미디어 쿼리 없이 반응형 그리드를 구성할 수 있으며, `item-tolerance`로 콘텐츠 크기 차이에 따른 시각적 불균형을 완화합니다. Safari Technology Preview 234에서 실험이 가능하며, WebKit 팀은 표준화 논의와 구현을 병행해 개발자 피드백을 적극적으로 수집하고 있습니다.

## Topic Body

- 웹에서 **masonry 레이아웃**을 구현하기 위한 새로운 CSS 기능 **Grid Lanes**가 Safari Technology Preview 234에 도입됨  
- `display: grid-lanes` 속성을 사용해 **미디어 쿼리 없이 반응형 그리드**를 구성할 수 있으며, `grid-template-columns`로 유연한 열 정의 가능  
- **`item-tolerance` 속성**을 통해 항목 배치의 민감도를 조정, 콘텐츠 크기 차이에 따른 시각적 불균형을 완화  
- **열 방향과 행 방향 모두 지원**, `grid-template-columns` 또는 `grid-template-rows` 정의에 따라 자동으로 흐름 결정  
- CSS Working Group이 일부 세부 속성명을 논의 중이며, WebKit 팀은 **표준화와 구현을 병행**해 개발자 실험을 권장  

---
### CSS Grid Lanes 개요
- **Grid Lanes**는 웹에서 **masonry 스타일 레이아웃**을 네이티브 CSS로 구현하기 위한 새로운 디스플레이 모드  
  - `display: grid-lanes`를 사용해 기존 `grid`와 유사한 문법으로 구성  
  - `grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))`로 최소 250px 폭의 유연한 열 생성  
- `gap` 속성으로 **항목 간 간격**을 지정하며, 미디어 쿼리 없이 모든 화면 크기에 대응  
- Safari Technology Preview 234에서 **실험 가능**, WebKit 데모 페이지 제공  

### Grid Lanes의 작동 방식
- 브라우저가 각 항목을 **가장 위쪽에 가까운 열**에 자동 배치  
  - Masonry.js와 유사하게, 다음 항목은 현재 가장 짧은 열에 추가됨  
  - 사용자는 탭 이동 시 **현재 보이는 콘텐츠를 가로 방향으로 탐색** 가능  
- **무한 스크롤 콘텐츠 로딩** 시 자바스크립트 없이도 자동 정렬 가능  

### CSS Grid의 확장 기능
- **lane 크기 다양화**: `grid-template-*` 문법으로 좁은 열과 넓은 열을 교차 배치 가능  
  - 예시: `grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr) minmax(16rem, 2fr)) minmax(8rem, 1fr)`  
- **항목 확장(span)** 지원  
  - 특정 항목을 여러 열에 걸쳐 배치 가능 (`grid-column: span 4` 등)  
  - 예시 데모: 신문 기사형 레이아웃  
- **명시적 배치** 가능  
  - 예: `header { grid-column: -3 / -1; }`로 마지막 열에 헤더 고정  

### 방향 전환 기능
- **열 기반(waterfall)** 또는 **행 기반(brick)** 레이아웃 모두 지원  
  - `grid-template-columns` 정의 시 열 방향, `grid-template-rows` 정의 시 행 방향으로 자동 설정  
- `grid-auto-flow: normal`이 기본값으로, 정의된 방향에 따라 자동 판단  
- CSS Working Group은 흐름 제어를 위한 속성(`grid-lanes-direction` 등) 명칭을 논의 중  
  - 관련 논의는 GitHub CSSWG-drafts 이슈에서 진행 중  

### 배치 민감도 조정: item-tolerance
- **`item-tolerance`** 는 항목 배치 시 크기 차이를 얼마나 엄격히 구분할지 결정  
  - 기본값은 `1em`, 이보다 작은 차이는 동일한 높이로 간주  
  - 값이 높을수록 항목이 **좌우로 덜 이동**, 낮을수록 **세밀한 위치 조정** 발생  
- 접근성 측면에서 **탭 이동 시 시각적 점프 최소화**를 위해 적절한 값 설정 필요  
- 속성명은 현재 `item-tolerance`로 정의되어 있으나, `flow-tolerance` 또는 `pack-tolerance`로 변경될 가능성 있음  

### 실험 및 활용 예시
- Safari Technology Preview 234에서 **여러 데모 제공**  
  - 사진 갤러리, 신문형 기사, 박물관 사이트, **메가 메뉴 레이아웃** 등  
- 예시 코드:
  ```
  .container {
    display: grid-lanes;
    grid-template-columns: repeat(auto-fill, minmax(max-content, 24ch));
    column-gap: 4lh;
  }
  ```
- 이미지뿐 아니라 **링크가 많은 푸터나 메뉴 구성**에도 유용  

### 향후 계획
- CSS Working Group이 **남은 속성명 결정**을 진행 중  
- WebKit 팀은 **2022년 중반부터 구현 및 표준화 작업**을 병행  
- 개발자에게 **데모 제작 및 피드백 참여**를 권장  
  - Jen Simmons는 Bluesky 및 Mastodon을 통해 의견 수렴 중  
- 기본 문법이 안정화되어, **실제 프로젝트 적용 준비 완료**

## Comments



### Comment 48082

- Author: shakespeares
- Created: 2025-12-21T19:16:33+09:00
- Points: 1

그럼 사파리용 Grid-lanes랑 firefox용 grid를 따로 써야하잖아요. 웹 표준으로 좀 맞춰주십쇼...

### Comment 48052

- Author: neo
- Created: 2025-12-20T21:32:51+09:00
- Points: 1

###### [Hacker News 의견들](https://news.ycombinator.com/item?id=46331586) 
- Safari 팀에게 박수를 보냄. 10월에 갑자기 [Interop 2025 순위](https://wpt.fyi/interop-2025) 최상단으로 치고 올라온 건 정말 놀라운 일임  
  - iOS 26 이후 Safari가 엄청난 **웹 기능 업데이트**를 받은 걸 체감했음. WebGPU뿐 아니라 OPFS API의 누락된 부분을 채워서 이제 실사용이 가능해졌음. 게다가 [field-sizing CSS 속성](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/field-sizing)도 추가되어, 텍스트 입력창이 입력 내용에 맞게 자동으로 커지는 문제를 해결했음  
  - Safari는 큰 릴리스 때마다 “최고의 브라우저”라는 평가를 받지만, 그 외 시기에는 비판을 많이 받는 경향이 있음. 이는 다른 브라우저들이 **지속적 업데이트**를 하는 반면 Safari는 전통적인 릴리스 주기를 따르기 때문이라 생각함  
  - 사실 놀랄 일은 아님. 몇 년 전부터 Safari 팀이 최신 HTML과 CSS 기능을 꾸준히 내보내는 걸 지켜봐왔음  
  - Chrome 팀이 WebPCIe 같은 실험적 기능을 홍보하는 동안, Safari는 **사용자들이 실제로 원하는 기능**을 제공해왔음. 예를 들어 흐릿한 배경 효과 같은 걸 훨씬 일찍 지원했음  
  - 다만 Safari가 아직 64비트 wasm을 지원하지 않는 건 아쉬움. [WebAssembly 기능 목록](https://webassembly.org/features/)에는 “100% 지원”이라 되어 있지만, 실제로는 중요한 부분이 빠져 있음  

- [CSS Gap Decorations](https://developer.chrome.com/blog/gap-decorations) 기능이 빨리 나오길 바람. flex나 grid 아이템 사이에 예쁜 경계선을 만들기 위해 **불필요한 해킹**을 계속 쓰는 게 지겨움  
  - 테이블을 써보는 건 어떤가 제안함. 이미 예전보다 훨씬 나아졌는데, 우리는 계속 더 많은 걸 원함. 인간은 결코 만족하지 못하는 존재 같음  

- 최근 프로젝트에서 Masonry 레이아웃을 사용했는데, 성능은 괜찮지만 **absolute positioning** 기반이라 꽤 해키함. 객체의 종횡비를 미리 알아야 하고, 리사이즈 시 다시 계산해야 함. 그래서 네이티브 지원이 빨리 나오길 기대함  
  - 나도 같은 마음임. CSS가 문제를 해결해주길 기다리며, 2019년부터 내 홈페이지에서 마지막 1.3KB의 자바스크립트를 제거할 날을 기다리고 있음. 이 기능을 만드는 모든 사람에게 감사함  

- 이런 발표들은 멋지지만, **비극적 코미디** 같은 면이 있음. Apple이 브라우저를 지속적으로 업데이트하지 않기 때문에, 새로운 기능을 실제로 신뢰하고 쓸 수 있는 시점은 한참 뒤임  

- Masonry 레이아웃은 보기엔 좋지만, 이미지 전체를 한눈에 파악하기 어렵다고 생각함  
  - 웹 “디자인”의 많은 부분이 **사용성보다 외형**에 집중되어 있음. 실제로 제품을 써보는 사람은 거의 없고, 스크롤 애니메이션만 보고 “멋지다”고 말함  
  - 이미지가 모두 가로형이거나 세로형일 때는 괜찮지만, 섞여 있으면 레이아웃이 엉망이 됨  

- 이름을 왜 Masonry라고 하지 않았는지 의아함. 그래도 grid-lanes라는 이름은 설명적이라 이해하기 쉬움  

- LLM이 이런 새로운 CSS 문법을 **정확히 학습**하는 데 얼마나 걸릴지 궁금함  

- 임의 크기와 위치의 텍스트 그리드로 된 웹페이지를 봐야 한다면, 차라리 누가 나를 쏴줬으면 함  
  [신문식 그리드 데모 이미지](https://webkit.org/wp-content/uploads/Grid-Lanes-newspaper-demo-dark.png)  
  - 신문 안 읽어봤음?  
  - 나는 이런 디자인이 좋다고 생각함. 신문처럼 **비대칭적이지만 효율적인 레이아웃**을 웹에서 구현할 수 있음  
  - 하지만 이는 디자인의 기본 원칙인 **정렬과 그룹화**를 위반한다고 느낌  
  - 웃기게도, 나는 그게 정말 멋지다고 생각함  
  - NYTimes.com이 바로 그런 예시로 떠오름  

- 개인적으로 lane 레이아웃을 싫어함. 리스트의 모든 요소를 순서대로 살펴보기 어렵고, 시선이 위아래로 튀어서 **인지적 피로감**이 큼  
  - 하지만 모든 요소를 체계적으로 살펴볼 필요가 없다면 lane 레이아웃도 괜찮음. Pinterest처럼 콘텐츠를 한눈에 흡수하는 사이트에는 적합함  
  - 보기엔 좋지만, 깊게 사용할 때는 불편한 레이아웃임  
  - 효율성이 목적이 아니라, 한눈에 전체를 보게 하는 게 목적임. 신문이나 사진 갤러리처럼  
  - 유행이 끝나갈 때쯤 기능이 나오는 게 아이러니함. UX적으로는 별로지만, 시각적으로는 예쁨  
  - **우뇌형 디자인** 느낌임. Pinterest나 Home Assistant 같은 사이트에는 어울림  

- Apple이 Safari를 모든 플랫폼에서 안정적으로 다운로드할 수 있게 해야 한다고 생각함  
  - 예전에 Windows XP에 Safari를 설치했던 기억이 있음. 그 실패작 이후로 아직 시간이 충분히 지나지 않은 듯함  
  - 하지만 간접적으로 가능할 수도 있음. Kagi의 새 브라우저가 WebKit을 사용하고 있고, 지금은 macOS 전용이지만 **Windows 버전**도 eventually 나올 예정임