https://css-tricks.com/css-masonry-css-grid/https://css-tricks.com/css-masonry-css-grid/
ChatGPT로 요약함
CSS Masonry 레이아웃의 표준화 논의 요약
1. 배경
- Masonry 레이아웃(불규칙한 크기의 아이템을 열 단위로 배치)은 CSS3 시대부터 사용되었지만, 표준화된 CSS 솔루션이 없었음.
- JavaScript 기반의 Masonry.js(2010년대 초)나 Pinterest의 디자인이 대표적인 예시.
- CSS Grid가 Holy Grail 레이아웃을 해결했듯, Masonry도 공식 지원이 필요함.
2. 현재 진행 상황
- CSS 작업 그룹(CSSWG)은 두 가지 방안을 논의 중:
- Grid에 Masonry 기능을 포함하는 방식
- Masonry를 Grid와 독립적인 새로운 display 속성으로 추가하는 방식
- 두 방안 모두 장점과 단점이 있으며, 논의가 활발히 진행 중.
3. Grid에 Masonry를 통합하는 방안 (Case 1)
장점
- 기존 CSS Grid의 기능(서브그리드 등)을 활용할 수 있음.
- 기존 Grid 사용자가 쉽게 학습할 수 있음.
- Masonry가 지원되지 않는 환경에서도 graceful degradation(일반 그리드로 대체)이 가능함.
단점
- Grid는 아이템을 먼저 배치한 후 크기를 조정하는 방식인데, Masonry는 반대로 크기를 먼저 정하고 배치하는 방식이라 충돌 가능성이 있음.
- Grid의 기본값과 Masonry의 동작 방식이 다르므로 사용하기 직관적이지 않을 수 있음.
4. Masonry를 독립적인 레이아웃으로 분리하는 방안 (Case 2)
장점
- Grid의 기존 동작 방식과 충돌하지 않으며, Masonry에 최적화된 레이아웃을 제공 가능.
- Flexbox처럼 직관적으로 사용할 수 있는 새로운 접근법을 제공할 수 있음.
단점
- Grid와의 연계성이 떨어질 수 있으며, 기존 Grid 사용자가 추가적으로 학습해야 함.
- Grid의 기능(예: 서브그리드)을 활용할 수 없을 가능성이 있음.
5. 결론
- CSSWG에서 두 방안을 놓고 의견을 수렴 중.
- 개발자 및 커뮤니티 피드백을 받아 최종 결정이 내려질 예정.
- GitHub Issue #9041에서 논의가 진행 중이며, 관심 있는 개발자들의 참여가 권장됨.