게시일: 2025년 7월 23일
Microsoft Edge 및 Google Chrome팀에서 CSS masonry가 Chrome 및 Edge 140부터 초기 개발자 테스트를 지원한다고 발표하게 되어 기쁩니다.
CSS 메이슨리 사양 및 구문과 관련된 미해결 문제가 아직 남아 있으므로 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 그리드, Flexbox 또는 다중 열 내에서 항목의 올바른 배치와 공간 분배를 보장하여 CSS 석조 레이아웃을 모방하기는 어렵습니다.
- 두 개 이상의 열이나 행에 걸쳐 있는 항목, 항목의 맞춤 순서 지정, 뷰포트에 맞게 조정과 같은 특정 기능을 처리하는 것도 복잡성과 제한으로 이어질 수 있습니다.
- 유지보수 부담 증가: 복잡한 맞춤 CSS 또는 JavaScript 코드는 유지보수가 더 어렵습니다.
CSS 그리드는 매우 유연한 놀라운 레이아웃 모드로, 전체 웹페이지나 구성요소, 개별 항목을 정렬하는 등 다양한 스타일의 레이아웃을 만들 수 있습니다. 하지만 벽돌과 같은 특징은 없습니다.
CSS 그리드에서 행과 열은 엄격하게 정의되며 항목은 그리드 셀 내에만 존재할 수 있습니다. 한 축을 따라 항목을 배치하려고 하는데 항목이 각 셀에 맞게 크기가 조정되지 않는 경우 항목 사이에 간격을 두거나 빈 공간을 채우기 위해 항목을 늘려야 합니다.
메이슨리와 마찬가지로 Flexbox는 한 방향만 고려하고 항목이 다른 방향을 따라 차지할 공간을 결정하도록 합니다. 즉, 항목이 블록 방향으로 한 번에 하나의 열로 배치되어도 괜찮다면 Flexbox를 사용하여 벽돌 레이아웃과 같은 레이아웃을 얻을 수 있습니다. 또한 항목이 새 플렉스 라인으로 래핑되어 새 열이 생성되도록 하려면 플렉스 컨테이너에 정의된 블록 크기 또는 높이가 필요합니다.
다단은 또한 벽돌 쌓기처럼 보이는 레이아웃을 만들 수 있으며, 이 경우에도 항목이 열에 배치됩니다. 또한 다단에서는 각 열의 크기를 다르게 지정할 수 없습니다. 모두 동일한 크기인 반면, Masonry는 항목이 배치되는 트랙을 정의할 때 많은 유연성을 제공합니다.
여기서 기억해야 할 점은 그리드, 플렉스박스 또는 다단이 메이슨리보다 나쁜 레이아웃이 아니라는 것입니다. 이러한 레이아웃은 다양한 사용 사례에 적합합니다. 요점은 원하는 것이 벽돌 레이아웃이라면 CSS 벽돌이 이를 제공한다는 것입니다.
CSS Masonry의 상태
CSS 워킹 그룹은 CSS 그리드 수준 3 사양에서 masonry를 초안으로 작성하고 있습니다. 사양은 아직 개발 중이며 일시적으로 두 가지 다른 제안된 구문을 포함합니다. 첫 번째는 display 속성에 새 키워드를 사용하고 두 번째는 메이슨리가 CSS 그리드 레이아웃에 직접 통합됩니다.
display: masonry 사용
이 문법은 CSS 메이슨리를 자체 display 유형으로 도입합니다. 접근 방식과 그 동기에 관한 자세한 내용은 Google Chrome팀의 블로그 게시물 의견이 필요합니다: CSS 메이슨리를 어떻게 정의해야 할까요?와 이 게시물의 나머지 섹션을 참고하세요. Chromium의 현재 프로토타입은 이 제안을 기반으로 합니다.
display: grid; grid-template-*: masonry;
이 구문에서 CSS Masonry는 CSS 그리드에 직접 통합됩니다. 메이슨리 모드는 행 기반 메이슨리 레이아웃의 경우 grid-template-columns 정의에, 열 기반 메이슨리 레이아웃의 경우 grid-template-rows 정의에 masonry 키워드를 적용하여 트리거됩니다.
이 제안과 그 동기에 대한 자세한 내용은 WebKit 게시물 CSS에서 Masonry의 최종 구문을 선택하는 데 도움을 주세요에서 확인할 수 있습니다.
이 제안의 대안은 item-pack 속성과 collapse 키워드입니다. 이 키워드는 두 그리드 템플릿 속성 중 하나를 사용하는 대신 CSS 메이슨리를 트리거합니다.
Chrome 및 WebKit팀의 게시물 이후 CSSWG는 전반적인 구문에 관해 계속 논의하여 앞으로 나아갔습니다. 보내주신 의견은 이러한 포럼의 향후 개발에 도움이 될 수 있습니다.
토론의 현재 상태에 관한 자세한 내용은 현재의 그리드 구문 토론 주제를 간략하게 설명하는 문제 11593과 지금까지의 구문 논쟁을 요약한 문제 11243을 참고하세요.
나만의 CSS Masonry 레이아웃 만들기
재미있는 CSS 메이슨리 레이아웃을 만들어 보겠습니다.
CSS Masonry의 문법은 아직 논의 중이지만, 오늘 CSS Masonry 테스트하기에 설명된 대로 CSS Masonry 레이아웃 플래그를 사용 설정하면 오늘 Chromium에서 이 기능의 구현을 테스트할 수 있습니다. 다음 예는 개발자 체험판에서 사용할 수 있는 기능을 보여줍니다.
Masonry 컨테이너 만들기
첫 번째 열 기반 masonry 컨테이너를 만들려면 display:masonry를 사용하고 grid-template-columns를 사용하여 열 크기를 정의합니다. masonry-direction은 기본적으로 column이므로 이 속성을 설정하지 않아도 됩니다.
.masonry {
display: masonry;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 10px;
}
대신 행 기반 메이슨리 컨테이너의 경우 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에는 하나의 차원만 있으므로 혼동스러운 grid- 접두사 속성 없이 Masonry 방향과 트랙 정의를 한 번에 정의하는 데 사용할 수 있는 masonry 약식 속성도 구현했습니다.
예를 들어 다음 두 코드 스니펫은 동일한 CSS 메이슨리 컨테이너를 만듭니다.
.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는 레이아웃 트랙의 수와 크기를 세부적으로 조정할 수 있다는 점에서 그리드만큼 유연합니다. 메서너리 트랙의 크기가 모두 같을 필요는 없습니다. 예를 들면 다음과 같습니다.
.masonry {
display: masonry;
masonry: repeat(2, 3rem) repeat(auto-fit, 5rem) 12rem;
}
이 예시에서는 처음 3rem 트랙 2개를 정의하고 그 뒤에 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;
}
뉴스 사이트 데모에서 기사 내에 구독 광고를 표시하는 데 사용하는 것입니다.
masonry 항목 배치 미세 조정
CSS Masonry에서는 항목이 실행 위치가 가장 짧은 열이나 행에 배치됩니다.
2열 masonry 컨테이너를 상상해 보세요. 컨테이너의 첫 번째 열에 높이가 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을 이름으로 사용하기로 결정했으며 사양이 곧 업데이트될 예정입니다.
기타 사용 가능한 속성
CSS 그리드에서와 마찬가지로 동일한 템플릿 크기 조정 및 배치 속성을 사용하여 메이슨리 컨테이너의 그리드 축에서 항목의 크기를 조정하고 배치할 수 있습니다(예: grid-row, grid-column, grid-area, grid-template-areas, order).
masonry 레이아웃을 만들 때 CSS 그리드의 모든 기능을 경험해 보세요.
의견 요청
CSS 메이슨리를 살펴보고, 창의력을 발휘하고, 이 기능을 통해 활용할 수 있는 새로운 기능을 발견해 보세요. 시작하는 좋은 방법은 데모와 소스 코드를 확인하고 Chromium에서 자체 예제를 빌드하는 것입니다 (먼저 플래그를 사용 설정해야 함).
의견은 API를 구성하고 웹에서 요구사항을 충족하도록 설계되었는지 확인하는 데 중요합니다. Masonry를 사용해 보고 의견을 알려주세요.
API의 형태에 관한 의견이 있으면 문제 11243에 댓글을 남겨 알려주세요. 자체 블로그나 소셜 미디어에 게시물을 작성하는 경우 X 또는 LinkedIn을 통해 알려주세요.
CSS masonry는 아직 Chromium에서 구현 중입니다. 테스트하는 경우 Google에서 아직 이 기능을 적극적으로 개발하고 있으며 예상대로 작동하지 않는 사례가 발생할 수 있다는 점에 유의하세요. 현재 제한사항에는 빽빽한 패킹, 역방향 배치, 하위 그리드 지원, 흐름 외 지원, 기준선 지원, DevTools 지원, 프래그먼트 지원, 간격 장식 지원 등이 있습니다.
기능을 테스트하는 동안 버그를 발견하면 새 Chromium 버그를 열어 의견을 공유하세요.