CSS Grid Lanes

1 month ago 14

웹에서 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을 통해 의견 수렴 중
기본 문법이 안정화되어, 실제 프로젝트 적용 준비 완료

Read Entire Article