▲

CSS Grid Lanes

 (webkit.org)
6P by GN⁺ 3일전 | ★ favorite | 댓글 2개
  • 웹에서 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을 통해 의견 수렴 중
  • 기본 문법이 안정화되어, 실제 프로젝트 적용 준비 완료
▲
shakespeares 2일전  [-]

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

답변달기
▲
GN⁺ 3일전  [-]
Hacker News 의견들

  • Safari 팀에게 박수를 보냄. 10월에 갑자기 Interop 2025 순위 최상단으로 치고 올라온 건 정말 놀라운 일임

    • iOS 26 이후 Safari가 엄청난 웹 기능 업데이트를 받은 걸 체감했음. WebGPU뿐 아니라 OPFS API의 누락된 부분을 채워서 이제 실사용이 가능해졌음. 게다가 field-sizing CSS 속성도 추가되어, 텍스트 입력창이 입력 내용에 맞게 자동으로 커지는 문제를 해결했음
    • Safari는 큰 릴리스 때마다 “최고의 브라우저”라는 평가를 받지만, 그 외 시기에는 비판을 많이 받는 경향이 있음. 이는 다른 브라우저들이 지속적 업데이트를 하는 반면 Safari는 전통적인 릴리스 주기를 따르기 때문이라 생각함
    • 사실 놀랄 일은 아님. 몇 년 전부터 Safari 팀이 최신 HTML과 CSS 기능을 꾸준히 내보내는 걸 지켜봐왔음
    • Chrome 팀이 WebPCIe 같은 실험적 기능을 홍보하는 동안, Safari는 사용자들이 실제로 원하는 기능을 제공해왔음. 예를 들어 흐릿한 배경 효과 같은 걸 훨씬 일찍 지원했음
    • 다만 Safari가 아직 64비트 wasm을 지원하지 않는 건 아쉬움. WebAssembly 기능 목록에는 “100% 지원”이라 되어 있지만, 실제로는 중요한 부분이 빠져 있음

  • CSS Gap Decorations 기능이 빨리 나오길 바람. flex나 grid 아이템 사이에 예쁜 경계선을 만들기 위해 불필요한 해킹을 계속 쓰는 게 지겨움

    • 테이블을 써보는 건 어떤가 제안함. 이미 예전보다 훨씬 나아졌는데, 우리는 계속 더 많은 걸 원함. 인간은 결코 만족하지 못하는 존재 같음

  • 최근 프로젝트에서 Masonry 레이아웃을 사용했는데, 성능은 괜찮지만 absolute positioning 기반이라 꽤 해키함. 객체의 종횡비를 미리 알아야 하고, 리사이즈 시 다시 계산해야 함. 그래서 네이티브 지원이 빨리 나오길 기대함

    • 나도 같은 마음임. CSS가 문제를 해결해주길 기다리며, 2019년부터 내 홈페이지에서 마지막 1.3KB의 자바스크립트를 제거할 날을 기다리고 있음. 이 기능을 만드는 모든 사람에게 감사함

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

  • Masonry 레이아웃은 보기엔 좋지만, 이미지 전체를 한눈에 파악하기 어렵다고 생각함

    • 웹 “디자인”의 많은 부분이 사용성보다 외형에 집중되어 있음. 실제로 제품을 써보는 사람은 거의 없고, 스크롤 애니메이션만 보고 “멋지다”고 말함
    • 이미지가 모두 가로형이거나 세로형일 때는 괜찮지만, 섞여 있으면 레이아웃이 엉망이 됨

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

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

  • 임의 크기와 위치의 텍스트 그리드로 된 웹페이지를 봐야 한다면, 차라리 누가 나를 쏴줬으면 함
    신문식 그리드 데모 이미지

    • 신문 안 읽어봤음?
    • 나는 이런 디자인이 좋다고 생각함. 신문처럼 비대칭적이지만 효율적인 레이아웃을 웹에서 구현할 수 있음
    • 하지만 이는 디자인의 기본 원칙인 정렬과 그룹화를 위반한다고 느낌
    • 웃기게도, 나는 그게 정말 멋지다고 생각함
    • NYTimes.com이 바로 그런 예시로 떠오름

  • 개인적으로 lane 레이아웃을 싫어함. 리스트의 모든 요소를 순서대로 살펴보기 어렵고, 시선이 위아래로 튀어서 인지적 피로감이 큼

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

  • Apple이 Safari를 모든 플랫폼에서 안정적으로 다운로드할 수 있게 해야 한다고 생각함

    • 예전에 Windows XP에 Safari를 설치했던 기억이 있음. 그 실패작 이후로 아직 시간이 충분히 지나지 않은 듯함
    • 하지만 간접적으로 가능할 수도 있음. Kagi의 새 브라우저가 WebKit을 사용하고 있고, 지금은 macOS 전용이지만 Windows 버전도 eventually 나올 예정임
답변달기