7P by xguru 2달전 | favorite | 댓글 2개
  • CSS 작업 그룹이 CSS Grid Layout Module Level 3, 일명 CSS 벽돌 쌓기 레이아웃(Masonry Layout)의 첫 공개 작업 초안을 발표함
  • 이 초안은 두 가지 가능한 구문 형식인 그리드 통합 구문과 그리드 독립 구문으로 벽돌 쌓기 레이아웃을 CSS의 내장 기능으로 다룸
  • 이 초안의 발행으로 두 구문 형식의 상대적 장점에 대한 논의를 촉진하기를 희망함

CSS 작업 그룹의 결정사항

  • CSS 작업 그룹은 이 레이아웃 모델에 완전한 혼합 트랙 크기 조정을 채택하기로 결의함
  • 이는 CSS 그리드 레이아웃에서 표현할 수 있는 모든 가능한 트랙 목록을 벽돌 쌓기 레이아웃에서도 허용함
  • 이는 두 제안서의 기본 레이아웃 모델을 통합하며, 따라서 두 구문 형식 모두 벽돌 쌓기 레이아웃에 대해 본질적으로 동등한 기능을 나타냄 (초기값의 차이에 대한 일부 미해결 이슈가 있음)
  • 혼합 트랙 크기 조정과 관련된 성능 문제를 해결하기 위해, 이 초안은 레이아웃 모델에서 특정 성능 최적화를 개략적으로 설명하고 하위 그리드 등에 대한 일부 단순화 경험 법칙을 채택함

Masonry Layout 은 MDN에 잘 설명되어 있습니다.
https://developer.mozilla.org/en-US/docs/…

WebKit 팀에서도 4월에 이에 대한 도움 요청글을 적은 바 있습니다
CSS Grid Level 3, 일명 "Masonry" 레이아웃을 만들기 위한 도움 요청
이 글엔 Masonry 레이아웃에 대한 예제 기반 설명 이미지가 포함되어 있으니 참고하세요

당장에 야매로 쓰고 싶은 분들이라면 이 속성을 쓰면 되기는 됩니다.
https://developer.mozilla.org/en-US/docs/Web/CSS/columns
물론 목적에서 벗어나긴 하죠. 왜냐면 이 속성은 레이아웃을 위한 속성이 아니라 페이지를 위한 속성이니까요. 특히 인쇄 방향으로.