- WebKit은 CSS에서 오래 까다로웠던 masonry/waterfall 레이아웃을 CSS Grid Level 3로 표준화하는 과정에 디자이너와 개발자의 피드백을 요청함
- 제안된 모델은
display: grid 위에서 grid-template-rows: masonry로 행 생성을 끄고, 콘텐츠를 벽돌처럼 빈 공간에 채우는 방식임
- Apple은 이 기능이 Grid 안에 있어야
fr, minmax(), max-content, spanning, 명시적 배치, subgrid 같은 기존 Grid 능력과 결합된다고 봄
- 별도
display: masonry 방식은 레이아웃 타입을 단순히 분리할 수 있지만, 논의상 동일 너비 열 중심으로 제한될 가능성이 있고 Grid의 트랙 크기 조절 능력을 쓰기 어려움
- 2024년 10월 업데이트 이후 CSS Working Group은 가변 너비 트랙, 명시적 배치, spanning, subgrid를 masonry에 포함할 가치가 있고 성능 구현도 가능하다고 결론냈지만, 문법 논의는 계속됨
CSS Grid Level 3의 현재 위치
- 2024년 10월 업데이트 이후 CSS Grid Layout Module Level 3의 공식 W3C Working Draft가 만들어졌고, masonry 레이아웃의 동작 방식이 문서화됨
- CSS Working Group 구성원들은 다음 기능을 masonry 레이아웃에 포함할 가치가 있으며, 성능 있게 구현 가능하다고 결론냄
- 가변 너비 트랙
- 명시적 배치
- spanning
subgrid
- 다만 문법에 대한 논쟁은 아직 열려 있으며, WebKit은 별도 글 Help us choose the syntax for Masonry in CSS에서 이를 이어감
왜 masonry 레이아웃이 필요한가
- CSS Grid Level 1은 2017년에 도입돼 float 기반 레이아웃의 크기와 배치 부담을 줄였고, Grid Level 2는 Subgrid를 제공함
- 하지만 CSS Grid가 나온 뒤에도 “masonry 레이아웃을 CSS로 어떻게 작성하나”라는 질문에는 7년 동안 뚜렷한 답이 없었음
- masonry 레이아웃은 콘텐츠가 벽돌이나 돌담처럼 서로 맞물려 배치되는 패턴이며, waterfall layout이라고도 불림
- 서로 다른 종횡비의 콘텐츠를 다룰 수 있어, 모든 항목을 같은 사각형으로 만들기 위해 자르거나 줄일 필요가 줄어듦
- 콘텐츠가 페이지 전체에 분산되므로 스크롤 시 읽기 순서를 자연스럽게 유지하고, 하단에 lazy-load로 콘텐츠를 추가할 때 기존 콘텐츠를 움직이지 않아도 됨
제안의 역사와 표준화 논쟁
- CSS에서 masonry 레이아웃을 만드는 메커니즘은 Mozilla가 2020년 1월 CSS Grid 확장으로 처음 제안했고, Firefox Nightly에서 플래그 뒤 실험 기능으로 구현됨
- Apple은 2022년에 Safari Technology Preview에서 CSS Grid Level 3 제안을 구현하기 시작했으며, 현재 기본으로 켜져 있음
- CSS Working Group 안에서는 기본 방향을 두고 이견이 있었음
- 일부는 masonry가 CSS Grid의 일부가 아니라 별도의
display 타입이어야 한다고 봄
- 일부는 이 레이아웃이 웹에 필요한지, 유명 웹사이트가 사용할지 확신하지 못함
- WebKit은 브라우저가 이 기능을 출시하려면 CSS Working Group의 합의가 먼저 필요하다고 봄
기본 사용법: 행을 끄고 열만 쓰는 Grid
- 고전적인 masonry/waterfall 레이아웃은
main 요소에 display: grid를 적용하고 열을 정의한 뒤, 행 방향에 masonry 값을 지정하는 식으로 작성됨
main {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
gap: 1rem;
grid-template-rows: masonry;
}
grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr))는 최소 14rem 너비의 유연한 열을 반복 생성함gap: 1rem은 열과 항목 사이에 1rem 간격을 만듦grid-template-rows: masonry는 브라우저에 행을 만들지 말고 콘텐츠를 masonry/waterfall 패턴으로 채우라고 지시함- 이 예시는 미디어 쿼리나 컨테이너 쿼리 없이 네 줄의 CSS로 다양한 화면 크기에 대응하는 유연한 레이아웃을 만듦
- 현재
masonry라는 값 이름은 브라우저 출시 전에 바뀔 가능성이 있음
Grid의 열 정의 능력을 유지하려는 이유
- WebKit은 masonry가 CSS Grid의 일부여야 한다는 근거를 보이기 위해 네 가지 데모를 만들었고, webkit.org/demos/grid3에서 직접 시험할 수 있음
- 데모는 Grid Level 3를 지원하는 브라우저에서 볼 수 있음
- CSS Grid는 열을 정의할 때 다양한 옵션을 제공함
px, em, rem, cqi, lh, ch, ic, cap, vw, svh 등 여러 단위의 고정 크기max-content, min-contentfr 단위minmax()% 크기auto
- 예를 들어 첫 번째와 마지막 열은 14ch 고정 너비로 두고, 가운데 열은 최소 28ch의 유연한 열로 만들 수 있음
main {
display: grid;
grid-template-columns: 14ch repeat(auto-fill, minmax(28ch, 1fr)) 14ch;
grid-template-rows: masonry;
gap: 1rem;
}
fr 단위와 minmax()를 조합하면 열이 서로 다른 단계에서 늘어나고 줄어드는 두 단계 유연성을 만들 수 있음max-content와 min-content는 열 크기를 콘텐츠 크기에 맞추게 해, 콘텐츠를 열에 맞추는 방식과 다른 배치를 가능하게 함grid-template-columns: 1fr 1fr 2fr 3fr 5fr 8fr;처럼 Fibonacci sequence를 사용해 서로 다른 너비의 열을 만들 수도 있음- mega menu 예시는
grid-template-columns: repeat(auto-fill, minmax(max-content, 30ch));를 사용해 각 열이 링크 텍스트를 줄바꿈 없이 담을 수 있을 만큼 커지게 함
- WebKit은 별도
display: masonry 논의가 오늘날 multicolumn layout처럼 동일 크기 열만 허용하는 방향이라고 봄
Spanning, View Transitions, columnar grid
- CSS Grid는 항목이 여러 열에 걸치도록 만들 수 있어, masonry 배치에서도 다양한 시각적 구성이 가능함
- 예시에서는 모든 5번째 이미지를 두 열에 걸치게 하고, 나머지 이미지는 한 열만 차지하게 만들 수 있음
- 더 넓은 종횡비의 이미지에
wider 클래스를 부여해 여러 열을 차지하게 하고, 모서리를 사각형으로 바꾸거나 간격을 0으로 줄이는 변형도 가능함
- Photos 데모는 View Transitions와 결합해, 사용자가 사진을 클릭하거나 탭하면 해당 사진이 여러 열에 걸쳐 커지고 브라우저가 전환을 자동 애니메이션함
- 이 데모는 Safari Technology Preview 192 이상이 필요함
- WebKit은 Grid Level 3의 핵심을 “masonry”라는 특정 패턴보다 행을 끄는 메커니즘으로 봄
- 이 방식은 열만으로 구성된 columnar grid를 만들며, CSS Grid Level 1이 잘 만드는 행과 열이 모두 정렬된 modular grid와 대비됨
Modular grid와 columnar grid의 차이
- modular grid는 콘텐츠가 열과 행 양쪽에 맞춰지는 Grid이며, CSS Grid Level 1은 이런 배치에 적합함
- float 기반 레이아웃도 콘텐츠 높이를 맞춰야 float가 제대로 정리되기 때문에, 웹에서 modular grid 사용을 부추겼음
- 실제 웹사이트에서는 이미지의 종횡비를 같게 만들거나, 텍스트 길이를 맞추거나, CMS 정책 또는 CSS 자르기와 말줄임으로 콘텐츠를 동일한 상자에 맞추는 경우가 많음
- columnar grid는 콘텐츠가 원하는 크기를 유지하도록 두고, 레이아웃이 콘텐츠에 맞춰 작동하게 할 수 있음
- WebKit은 최신 기사를 네 열에 걸치게 하고, 최근 기사 일부는 두 열, 오래된 콘텐츠는 한 열로 배치하는 예시를 통해 텍스트 중심 콘텐츠도 더 생동감 있게 배치할 수 있다고 봄
Subgrid와 명시적 배치의 결합
- CSS Grid Level 2의 subgrid는 대부분의 브라우저에서 지원됨
- 박물관 페이지 예시는 그림 카드의 메타데이터를 한 개의 왼쪽 정렬 열에 나열하는 대신,
subgrid로 연도와 카탈로그 번호를 각 카드 오른쪽에 배치하고 다른 카드의 동일 데이터와 줄을 맞춤
- masonry가 CSS Grid Level 3에 들어가면 기존 개발자 도구도 그대로 활용할 수 있음
- Safari Technology Preview의 Grid Inspector로
grid-template-rows: masonry를 시험할 수 있음
- 별도 display 타입이 되면 subgrid의 이점을 얻지 못함
- CSS Grid Level 1의 명시적 배치도 함께 사용할 수 있어, 예시에서는
grid-column: -3 / -1로 헤더를 마지막 두 열의 페이지 오른쪽 위에 배치함
- WebKit은 몇 줄의 레이아웃 코드로 Grid Level 1, 2, 3 기능을 결합해 미디어 쿼리나 컨테이너 쿼리 없이 가용 크기에 따라 열 수가 바뀌는 레이아웃을 만들 수 있다고 봄
display: masonry와의 쟁점
- WebKit과 Apple은 Masonry가 CSS Grid를 확장해 modular grid뿐 아니라 columnar grid도 만들 수 있게 하는 기능이라고 봄
- 이 방향에서는 열 정의, track spanning, 명시적 배치,
subgrid 등 Grid 기능을 함께 사용할 수 있음
- 별도 display 타입을 선호하는 쪽은 레이아웃 타입을 깔끔히 분리할 수 있다고 봄
display: block;
display: inline;
display: flexbox;
display: grid;
display: masonry;
- CSS Working Group은 별도 Masonry display type의 문법을 아직 논의하지 않았지만, WebKit은 Multicolumn layout과 비슷한 문법 또는 제한된 Grid 유사 문법을 예로 듦
main {
display: masonry;
columns: 28ch;
}
main {
display: masonry;
masonry-columns: repeat(5, minmax(28ch, 1fr));
/* where only one repeating width is allowed */
}
- 별도 레이아웃 타입은 Grid와 Masonry를 계속 함께 작동시키는 데 필요한 작업을 피할 수 있음
- 레이아웃 모델이 단순해짐
- 브라우저 구현이 쉬워짐
- 성능 함정 가능성이 줄어듦
- Grid와 Masonry 기능 세트가 서로 달라질 수 있음
- 반대로 WebKit은 두 유형의 Grid 레이아웃이 연결돼 있으면 CSS Working Group이 향후 기능을 modular grid와 columnar grid 모두에 대해 정의하게 된다고 봄
- 예를 들어 CSS Grid Level 4에서 grid area와 grid line 스타일링, 트랙 배경색, gap의 rule line 같은 기능이 추가된다면 처음부터 두 Grid 유형 모두에서 작동하는 편이 낫다고 봄
“Grid”를 어떻게 볼 것인가
- 별도
display: masonry를 지지하는 쪽은 CSS Grid가 본질적으로 2차원 정렬이며, masonry는 한 방향만 정렬하므로 Grid가 아니라고 보는 경우가 있음
- WebKit은 graphic design 역사에서 grid가 텍스트, 이미지, 콘텐츠를 규칙적 패턴으로 정렬해 가독성과 사용성을 돕는 도구였다고 봄
- 20세기 유럽과 미국의 모더니스트들이 열과 행 양쪽 정렬을 “proper” graphic design grid로 강조하기 전에도 다양한 grid가 사용됐음
- Mark Boulton은 대칭 columnar grid가 공식적이고 지루하다고 보고, 웹 디자인에서 비대칭 compound grid 사용을 장려했음
- CSS Grid Level 1은 비대칭 grid와 compound grid를 쉽게 만들 수 있게 했지만, 현재는 그 Grid가 modular grid일 때에만 해당함
- WebKit은 modular grid와 columnar grid가 모두 grid이며, CSS Grid도 columnar grid를 만들 능력을 가져야 한다고 봄
개발자와 디자이너에게 요청한 피드백
- WebKit은 개발자와 디자이너가 데모를 직접 만들고, 블로그나 소셜 미디어에 의견을 쓰고, CSS Working Group 이슈에 의견을 남기길 요청함
- 피드백 대상 질문은 다음과 같음
- “masonry”/“waterfall”이 CSS Grid의 일부여야 하는가
subgrid, spanning, 명시적 배치, 다양한 track sizing을 포함한 columnar grid 기능이 필요한가- 동일 크기 열의 고전적 masonry 레이아웃만 있으면 충분한가
- 실제로 이 기능을 사용할지, 무엇을 만들 수 있을지
- 만든 데모 링크가 있는지
- 이 모델로 할 수 없는 일이 있는지
- WebKit 팀은 Masonry 작업을 1년 반 동안 진행했으며, 2023년 2월 Safari Technology Preview 163에서 기본 활성화됨
- 기능을 곧 출시하고 싶지만, 이름을 포함한 세부 사항과 근본적 질문들이 먼저 해결돼야 함
이름 논의: masonry, waterfall, off
- WebKit은
masonry가 새 값의 최선의 이름은 아닐 가능성이 크다고 봄
- CSS 이름은 보통
center, contain, clip, wrap, smooth처럼 결과를 직접 설명하는 단순한 단어인 경우가 많음
masonry는 배경 설명이 필요한 은유라 영어를 쓰지 않는 개발자가 기억하기 어려울 수 있음- 어떤 지역에서는 이 레이아웃을
waterfall이라고 더 많이 부르므로 grid-template-rows: waterfall도 가능한 후보가 될 수 있음
- WebKit은 이 기능이 Pinterest류 레이아웃 자체보다 “Grid를 만들되 행은 만들지 말라”는 메커니즘에 가깝다고 봄
grid-template-rows: none;은 의미상 적합할 수 있지만, none은 이미 grid-template-*의 기본값으로 “명시적 행 없이 암시적 행만 달라”는 뜻이라 사용할 수 없음- 대안으로
grid-template-rows: off;가 제시됨
main {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
grid-template-rows: off;
}
- CSSWG는 이름을 이 이슈에서 논의 중임
- 현재 Safari Technology Preview와 데모에서는 Editor’s Draft에 맞춰
masonry 값을 사용하지만, 미래에는 이름이 바뀔 수 있음
