# CSS Grid Level 3 / Masonry(벽돌 쌓기) 레이아웃의 첫 Draft 공개

> Clean Markdown view of GeekNews topic #16951. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=16951](https://news.hada.io/topic?id=16951)
- GeekNews Markdown: [https://news.hada.io/topic/16951.md](https://news.hada.io/topic/16951.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2024-09-27T09:46:02+09:00
- Updated: 2024-09-27T09:46:02+09:00
- Original source: [w3.org](https://www.w3.org/blog/CSS/2024/09/24/css-grid-3-fpwd/)
- Points: 7
- Comments: 2

## Summary

CSS 작업 그룹이 CSS Grid Layout Module Level 3, 즉 벽돌 쌓기 레이아웃의 첫 초안을 발표했습니다. 이 초안은 두 가지 구문 형식을 통해 벽돌 쌓기 레이아웃을 CSS의 내장 기능으로 다루며, 이를 통해 구문 형식의 장점에 대한 논의를 촉진하고자 합니다. 또한, 혼합 트랙 크기 조정과 관련된 성능 문제를 해결하기 위해 특정 성능 최적화와 단순화된 규칙을 제안하고 있습니다.

## Topic Body

- CSS 작업 그룹이 CSS Grid Layout Module Level 3, 일명 CSS 벽돌 쌓기 레이아웃(Masonry Layout)의 첫 공개 작업 초안을 발표함   
- 이 초안은 두 가지 가능한 구문 형식인 그리드 통합 구문과 그리드 독립 구문으로 벽돌 쌓기 레이아웃을 CSS의 내장 기능으로 다룸  
- 이 초안의 발행으로 두 구문 형식의 상대적 장점에 대한 논의를 촉진하기를 희망함  
  
### CSS 작업 그룹의 결정사항  
- CSS 작업 그룹은 이 레이아웃 모델에 완전한 혼합 트랙 크기 조정을 채택하기로 결의함  
- 이는 CSS 그리드 레이아웃에서 표현할 수 있는 모든 가능한 트랙 목록을 벽돌 쌓기 레이아웃에서도 허용함  
- 이는 두 제안서의 기본 레이아웃 모델을 통합하며, 따라서 두 구문 형식 모두 벽돌 쌓기 레이아웃에 대해 본질적으로 동등한 기능을 나타냄 (초기값의 차이에 대한 일부 미해결 이슈가 있음)  
- 혼합 트랙 크기 조정과 관련된 성능 문제를 해결하기 위해, 이 초안은 레이아웃 모델에서 특정 성능 최적화를 개략적으로 설명하고 하위 그리드 등에 대한 일부 단순화 경험 법칙을 채택함

## Comments



### Comment 29286

- Author: [hidden]
- Created: 2024-09-27T13:46:45+09:00
- Points: 1

[숨김 처리된 댓글입니다]

### Comment 29260

- Author: xguru
- Created: 2024-09-27T09:47:01+09:00
- Points: 3

Masonry Layout 은 MDN에 잘 설명되어 있습니다.  
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Masonry_layout  
  
WebKit 팀에서도 4월에 이에 대한 도움 요청글을 적은 바 있습니다  
[CSS Grid Level 3, 일명 "Masonry" 레이아웃을 만들기 위한 도움 요청](https://news.hada.io/topic?id=14472)  
이 글엔 Masonry 레이아웃에 대한 예제 기반 설명 이미지가 포함되어 있으니 참고하세요