게시일: 2025년 7월 23일, 최종 업데이트: 2026년 2월 13일
Microsoft Edge 및 Google Chrome팀은 Chrome 및 Edge 140에서 CSS masonry를 초기 개발자 테스트에 사용할 수 있다고 발표했습니다.
CSS masonry 사양 및 문법과 관련된 미해결 문제가 아직 남아 있으므로 API의 최종 형태를 확정하는 데 여러분의 의견이 매우 중요합니다. 기능을 사용해 보고 의견을 알려주세요.
지금 바로 Chromium에서 CSS Masonry 테스트하기
지금 CSS Masonry를 테스트하려면 다음 단계를 따르세요.
- Chrome 또는 Edge 140 이상(또는 일치하는 버전의 다른 Chromium 기반 브라우저)을 사용합니다.
- 새 탭에서
about:flags로 이동합니다. - 'CSS Masonry Layout'을 검색합니다.
- 플래그를 사용 설정합니다.
- 브라우저를 다시 시작합니다.
이 기능을 사용 설정하면 Microsoft Edge 데모를 확인(데모 소스 코드 보기)하여 작동하는 모습을 확인하거나 계속 읽어 기능과 사용 가능한 문법에 대해 자세히 알아볼 수 있습니다.
벽돌 쌓기란 무엇인가요?
CSS masonry는 CSS 그리드, flexbox 또는 다중 열 레이아웃으로는 쉽게 구현할 수 없는 방식으로 벽돌과 같은 항목 배열을 만들 수 있는 레이아웃 모드입니다.
CSS masonry를 사용하면 항목을 열 또는 행 형식으로 정렬할 수 있으며, 항목은 해당 열 또는 행 내에 접힌 방식으로 배치됩니다.
벽돌을 고속도로라고 생각하면 됩니다. 유일한 제약 조건은 다양한 주행 차선의 수와 크기입니다. 레인 내에서 차량은 원하는 길이를 가질 수 있으며 항상 목적지(벽돌 레이아웃의 시작점)에 최대한 가까워지려고 합니다.
레이아웃 항목은 한 방향으로만 제한되며, 가까이 있는 다른 항목과 관계없이 다른 방향으로 자유롭게 확장될 수 있습니다. masonry는 트랙이 한 방향으로만 정의된다는 점에서 그리드와 다릅니다.
Masonry에서는 항목의 시각적 순서가 최종 디자인보다 덜 중요합니다. Masonry를 사용하면 어떤 항목이든 사용 가능한 공간을 최대한 활용할 수 있습니다. 따라서 시각적으로 집중도가 높고 콘텐츠의 시각적 순서가 최종 결과만큼 중요하지 않은 페이지에 적합합니다.
벽돌의 흥미로운 점은 그리드와 마찬가지로 항목이 여러 트랙에 걸쳐 있을 수 있다는 것입니다. 이 경우 항목은 사용 가능한 공간을 최대한 채우는 방식으로 계속 배치됩니다.
이 자동 배치 동작은 웹 디자이너가 오랫동안 달성하려고 노력해 온 매우 흥미로운 결과를 가져올 수 있습니다. 예를 들어 뉴욕시 사진 갤러리 데모를 확인하세요. 이 데모에서는 특정 항목(이 예에서는 제목)이 여러 열에 걸쳐 표시되도록 허용하면서 여러 열을 따라 사진을 간결하게 표시하는 방법을 보여줍니다.
다음은 Masonry를 사용할 수 있는 몇 가지 다른 예입니다.
각 게시물의 썸네일과 설명을 보여주는 블로그 레이아웃입니다.
기사가 열에 표시되고 일부 기사는 다른 기사보다 넓으며 히어로 이미지가 페이지의 전체 너비에 걸쳐 있는 뉴스 사이트입니다.
열 크기가 서로 다른 사진 모음으로, 특정 사진은 여러 열에 걸쳐 있습니다.
해결 방법 및 제한사항
현재 웹에서 이 디자인 패턴을 구현하려면 JavaScript 라이브러리 또는 CSS 그리드, flexbox 또는 다중 열을 사용하는 해결 방법을 사용해야 합니다. 하지만 이 경우 다음과 같은 단점이 있을 수 있습니다.
- 성능 저하: JavaScript 라이브러리나 맞춤 코드에 의존하여 CSS masonry를 모방하면 성능 저하가 발생하여 사용자 환경에 부정적인 영향을 미칠 수 있습니다.
- 코드 복잡성 증가:
- CSS masonry 레이아웃을 모방하기 위해 CSS 그리드, flexbox 또는 다중 열 내에서 항목의 올바른 배치와 공간 분산을 보장하는 것은 달성하기 어렵습니다.
- 둘 이상의 열이나 행에 걸쳐 있는 항목, 항목의 맞춤 정렬, 표시 영역에 맞게 조정과 같은 특정 기능을 처리하는 것도 복잡성과 제한사항을 초래할 수 있습니다.
- 유지보수 부담 증가: 복잡한 커스텀 CSS 또는 JavaScript 코드는 유지보수가 더 어렵습니다.
CSS 그리드는 매우 유연하며 전체 웹페이지, 구성요소 또는 개별 항목 정렬 등 다양한 스타일의 레이아웃을 만들 수 있는 놀라운 레이아웃 모드입니다. 하지만 벽돌과 같은 특성은 없습니다.
CSS 그리드에서는 행과 열이 엄격하게 정의되며 항목은 그리드 셀 내에만 존재할 수 있습니다. 축 중 하나를 따라 항목을 패킹하려고 하지만 항목이 각 셀에 맞게 크기가 조정되지 않은 경우 항목 사이에 간격을 두거나 빈 공간을 채우도록 항목을 늘려야 합니다.
masonry와 마찬가지로 flexbox는 한 방향만 고려하며 항목이 다른 방향을 따라 차지할 공간을 결정할 수 있도록 합니다. 즉, 항목을 블록 방향으로 한 번에 한 열씩 배치하는 데 만족한다면 flexbox를 사용하여 벽돌 레이아웃과 유사한 레이아웃을 얻을 수 있습니다. 또한 Flex 컨테이너에는 정의된 블록 크기 또는 높이가 필요하므로 항목이 새 Flex 줄로 줄바꿈되어 새 열이 생성됩니다.
다중 열은 벽돌과 같은 레이아웃을 만들어 항목을 열로 정렬할 수도 있습니다. 또한 다중 열에서는 각 열의 크기를 다르게 지정할 수 없습니다. 모두 크기가 동일한 반면, masonry는 항목이 패킹되는 트랙을 정의할 때 많은 유연성을 제공합니다.
여기서 기억해야 할 점은 그리드, 플렉스박스 또는 다중 열이 masonry보다 나쁜 레이아웃이 아니라는 것입니다. 사용 사례가 많은 훌륭한 레이아웃 유형입니다. 요점은 벽돌 레이아웃을 원한다면 CSS 벽돌을 사용해야 한다는 것입니다.
CSS masonry의 상태
CSS 워킹 그룹은 CSS 그리드 수준 3 사양에서 masonry를 초안으로 작성하고 있습니다. 사양은 아직 개발 중이며 일시적으로 두 가지 제안된 문법을 포함합니다. 첫 번째는 display 속성에 새 키워드를 사용하고, 두 번째는 masonry가 CSS 그리드 레이아웃에 직접 통합됩니다.
display: masonry 사용
이 문법은 CSS masonry를 자체 display 유형으로 도입합니다. 이 접근 방식과 그 동기에 관한 자세한 내용은 Google Chrome팀의 블로그 게시물 의견 필요: CSS masonry를 어떻게 정의해야 할까요?와 이 게시물의 나머지 섹션에서 확인할 수 있습니다. Chromium의 현재 프로토타입은 이 제안을 기반으로 합니다.
display: grid; grid-template-*: masonry;
이 문법에서는 CSS masonry가 CSS 그리드에 직접 통합됩니다. 벽돌 모드는 행 기반 벽돌 레이아웃의 경우 grid-template-columns 정의에, 열 기반 벽돌 레이아웃의 경우 grid-template-rows 정의에 masonry 키워드를 적용하여 트리거됩니다.
이 제안과 동기에 관한 자세한 내용은 WebKit 게시물 CSS에서 Masonry의 최종 문법을 선택하는 데 도움을 주세요를 참고하세요.
이 제안의 대안은 item-pack 속성과 collapse 키워드로, 두 그리드 템플릿 속성 중 하나를 사용하는 대신 CSS masonry를 트리거합니다.
Chrome 및 WebKit팀에서 게시물을 게시한 이후 CSSWG는 진행할 전체 문법에 관한 논의를 계속해 왔습니다. 보내주신 의견은 이러한 포럼의 추가 개발에 도움이 될 수 있습니다.
현재 논의 상태에 관한 자세한 내용은 현재 벽돌 문법 논의 주제를 간략히 설명하는 문제 11593과 지금까지의 문법 논쟁을 요약한 문제 11243을 참고하세요.
나만의 CSS masonry 레이아웃 만들기
재미있게 CSS 벽돌 레이아웃을 만들어 보겠습니다.
CSS masonry의 문법은 아직 논의 중이지만, 지금 CSS Masonry 테스트에 설명된 대로 CSS Masonry Layout 플래그를 사용 설정하여 Chromium에서 이 기능의 구현을 테스트할 수 있습니다. 다음 예시에서는 개발자 무료 체험판에서 사용할 수 있는 기능을 보여줍니다.
벽돌형 컨테이너 만들기
첫 번째 열 기반 벽돌 컨테이너를 만들려면 display:masonry를 사용하고 grid-template-columns를 사용하여 열 크기를 정의합니다. masonry-direction의 기본값은 column이므로 이 속성 설정은 선택사항입니다.
.masonry {
display: masonry;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 10px;
}
행 기반 masonry 컨테이너의 경우 display:masonry를 사용하고 grid-template-rows를 사용하여 행 크기를 정의한 다음 masonry-direction:row를 설정합니다.
.masonry {
display: masonry;
masonry-direction: row;
grid-template-rows: repeat(auto-fit, minmax(160px, 1fr));
gap: 10px;
}
이 문법은 Google의 원래 제안과 약간 다릅니다. CSS Masonry에 사용되는 트리거와 관계없이 CSS 작업 그룹은 CSS Masonry 레이아웃 내에서 그리드 템플릿 크기 및 배치 속성을 재사용하기로 결정했습니다.
이렇게 하면 레이아웃 유형 간에 속성을 더 많이 재사용할 수 있지만 혼란스러울 수 있으므로 이 주제에 관한 의견을 보내주시기 바랍니다. 그리드와 메이슨리에 모두 사용할 수 있는 grid-template-columns 및 grid-template-rows와 같은 속성에 대해 template-columns 또는 template-rows와 같은 더 일반적인 별칭을 만드는 방법을 살펴볼 수 있습니다.
기본 트랙 크기 사용
새로운 디스플레이 유형이 도입되면서 속성 기본값을 다시 생각해 볼 기회가 생겼습니다.
그리드에서 grid-template-columns 및 grid-template-rows은 기본적으로 none로 설정되며, 현재 정의된 대로 일반적으로 단일 열 또는 행이 됩니다. masonry의 경우 이 기본값은 바람직하지 않은 레이아웃을 초래하는 경우가 많습니다.
Chromium의 구현은 none에 새로 제안된 정의를 추가하며, 이는 CSS masonry의 기본 트랙 크기를 대체합니다. 이 새로운 기본 트랙 크기는 repeat(auto-fill, auto) 값입니다. 이 값은 트랙 크기를 전혀 정의하지 않고도 멋진 벽돌 레이아웃을 만듭니다.
.masonry {
display: masonry;
gap: 10px;
}
이미지에 표시된 것처럼 masonry 컨테이너는 사용 가능한 공간에 맞게 자동 크기 열을 최대한 많이 만듭니다.
CSS 그리드를 사용하면 트랙 크기가 조정되기 전에 모든 항목이 배치되므로 이 트랙 자동 크기 조절 정의는 불가능합니다. 하지만 CSS masonry를 사용하면 배치와 크기 조절이 서로 얽혀 있고 간소화되므로 이 제한이 더 이상 적용되지 않습니다. 이 제한이 해제되면 벽돌 레이아웃에 더 유용한 트랙 기본 크기를 제공할 수 있습니다.
masonry 약식 속성 사용해 보기
앞서 언급했듯이 Chromium의 현재 구현은 grid-template-* 속성을 사용하여 레이아웃에서 masonry 트랙을 정의합니다.
하지만 벽돌은 한 차원만 있으므로 masonry 약식 속성도 구현했습니다. 이 속성을 사용하면 혼란스러운 grid- 접두사 속성 없이 벽돌 방향과 트랙 정의를 한 번에 정의할 수 있습니다.
예를 들어 다음 두 코드 스니펫은 동일한 CSS masonry 컨테이너를 만듭니다.
.masonry {
display: masonry;
masonry: "a a b" 50px 100px 200px row;
}
.masonry {
display: masonry;
masonry-direction: row;
grid-template-rows: 50px 100px 200px;
grid-template-areas: "a" "a" "b"
}
masonry 약식은 아직 CSS 작업 그룹에서 논의 중입니다. 지금 사용해 보고 의견을 알려주세요.
맞춤 트랙 크기 사용
트랙 크기를 정의할 때 벽돌은 레이아웃 트랙의 수와 크기를 미세 조정할 수 있다는 점에서 그리드만큼 유연합니다. 벽돌 트랙도 모두 같은 크기일 필요는 없습니다. 예를 들면 다음과 같습니다.
.masonry {
display: masonry;
masonry: repeat(2, 3rem) repeat(auto-fit, 5rem) 12rem;
}
이 예시에서는 처음 두 개의 3rem 트랙을 정의한 다음 다양한 수의 5rem 트랙을 정의하고 그 뒤에 단일 12rem 트랙을 정의합니다.
여러 트랙에 걸쳐 있음
벽돌 레이아웃에서는 항목이 배치된 트랙에 제한될 필요가 없습니다. 필요한 경우 여러 트랙에 걸쳐 있을 수 있기 때문입니다. 이는 일부 항목이 다른 항목보다 중요하고 더 많은 공간이 필요한 경우에 매우 유용할 수 있습니다.
예를 들면 다음과 같습니다.
.masonry {
display: masonry;
masonry: repeat(auto-fill, minmax(12rem, 1fr));
}
.important-item {
grid-column: span 2;
}
이 기능을 사용하여 여러 트랙에 걸쳐 특정 항목을 컨테이너의 전체 길이로 만들 수도 있습니다.
.masonry {
display: masonry;
masonry: repeat(auto-fill, minmax(12rem, 1fr));
}
.full-bleed {
grid-column: 1 / -1;
}
뉴스 사이트 데모에서 기사 내에 구독 광고를 표시하는 데 사용하는 방법입니다.
벽돌형 항목 배치 미세 조정
CSS Masonry에서 항목은 실행 위치가 가장 짧은 열 또는 행에 배치됩니다.
2열 벽돌 컨테이너를 상상해 보세요. 컨테이너의 첫 번째 열에 높이가 110px인 항목이 있고 두 번째 열에 높이가 100px인 항목이 있는 경우 세 번째 항목은 두 번째 열에 배치되며, 이 경우 벽돌 방향의 시작 부분에 10px 더 가까워집니다.
실행 위치의 10px 차이가 사용 사례에 충분히 작다고 생각하고 소스 순서와 더 잘 일치하도록 세 번째 항목을 첫 번째 열에 배치하려면 item-tolerance 속성을 사용하세요.
새 item-tolerance 속성은 항목 배치의 민감도를 제어합니다.
위의 예에서 item-tolerance: 10px;를 컨테이너에 적용하여 항목 배치의 가변성을 맞춤설정할 수 있습니다.
.masonry {
display: masonry;
masonry: 200px 200px;
gap: 10px;
item-tolerance: 10px;
}
초안 사양에서는 이 속성을 item-slack라고 부릅니다. CSS 작업 그룹은 최근에 item-tolerance를 이름으로 사용하기로 결정했으며 사양이 곧 업데이트될 예정입니다.
기타 사용 가능한 속성
grid-row, grid-column, grid-area, grid-template-areas, order와 같은 CSS 그리드와 마찬가지로 동일한 템플릿 크기 및 배치 속성을 사용하여 벽돌 컨테이너의 그리드 축에서 항목의 크기를 지정하고 배치할 수 있습니다.
벽돌 레이아웃을 만들 때 CSS 그리드의 모든 기능을 활용하세요.
의견 요청
CSS masonry를 살펴보고, 창의력을 발휘하고, 이를 통해 활용할 수 있는 새로운 기능을 발견해 보세요. 시작하는 가장 좋은 방법은 데모와 소스 코드를 확인하고 Chromium에서 자체 예시를 빌드하는 것입니다(먼저 플래그를 사용 설정해야 함).
보내주신 의견은 API를 개선하고 웹에서 사용자의 요구사항을 충족하도록 설계되었는지 확인하는 데 도움이 됩니다. Masonry를 사용해 보고 의견을 알려주세요.
API 형태에 관한 의견이나 피드백이 있으면 문제 11243에 댓글을 달아 알려주세요. 자체 블로그나 소셜 미디어에 게시물을 작성하고 싶다면 X 또는 LinkedIn을 통해 알려주세요.
CSS masonry는 아직 Chromium에서 구현 중입니다. 테스트하는 경우 아직 개발 중이며 예상대로 작동하지 않는 경우가 있을 수 있습니다. 현재 제한사항으로는 밀집 패킹, 역방향 배치, 하위 그리드 지원, 흐름 외 지원, 기준 지원, DevTools 지원, 단편화 지원, 간격 장식 지원 등이 있습니다.
기능을 테스트하는 동안 버그를 발견하면 새 Chromium 버그를 열어 의견을 공유하세요.