피드백 필요: CSS 석조물을 어떻게 정의해야 할까요?

Rachel Andrew

Ian Kilpatrick

Tab Atkins-Bittner

게시일: 2024년 9월 19일, 최종 업데이트: 2026년 2월 13일

CSS 워킹 그룹은 두 CSS masonry 제안을 하나의 초안 사양으로 결합했습니다. 이 그룹은 이를 통해 두 가지를 더 쉽게 비교하고 최종 결정을 내릴 수 있기를 바랍니다. Chrome팀은 별도의 masonry 구문이 최선의 방법이라고 여전히 생각합니다. 이전 게시물에서 언급한 가장 큰 성능 문제는 해결되었지만, 구문, 초기 값, 그리드와 결합된 버전을 얼마나 쉽게 배울 수 있는지에 관한 우려는 여전히 남아 있습니다.

하지만 가정을 테스트하기 위해 각 버전에서 Masonry가 어떻게 작동하는지 보여주는 몇 가지 예를 살펴봤습니다. 이 게시물의 예시를 살펴보고 의견을 보내주시면 Google에서 결정을 내리고 이 기능을 진행할 수 있습니다.

이 게시물에서는 가능한 모든 사용 사례를 다루지 않지만, masonry를 그리드 레이아웃에서 분리해도 기능이 부족해지지는 않습니다. 실제로 그 반대일 수도 있습니다. 이 게시물에서 볼 수 있듯이 display: masonry 버전은 새로운 기회와 더 간단한 구문을 제공합니다. 또한 많은 개발자가 Masonry를 사용하여 항목을 재정렬하면 접근성 문제가 발생할 수 있다는 우려를 제기했습니다. 또한 제안된 reading-flow 속성을 통해 두 버전의 구문 모두에 대해 이 문제가 해결됩니다.

기본 Masonry 레이아웃

이 레이아웃은 대부분의 사람들이 벽돌 쌓기를 생각할 때 떠올리는 레이아웃입니다. 항목은 행에 표시되며 첫 번째 행이 배치된 후 후속 항목은 더 짧은 항목이 남긴 공간으로 이동합니다.

제공업체: display: masonry

메이슨리 레이아웃을 만들려면 display 속성에 masonry 값을 사용합니다. 이렇게 하면 사용자가 정의한 열 트랙 (또는 콘텐츠에 의해 정의된 열 트랙)과 다른 축의 masonry가 있는 masonry 레이아웃이 생성됩니다. 첫 번째 항목은 블록 및 인라인 시작 부분 (따라서 영어에서는 왼쪽 상단)에 표시되고 항목은 인라인 방향으로 배치됩니다.

트랙을 정의하려면 CSS 그리드 레이아웃에서 사용되는 트랙 목록 값과 함께 masonry-template-tracks를 사용합니다.

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(3, 1fr);
  gap: 10px;
}

제공업체: display: grid

벽돌식 레이아웃을 만들려면 먼저 display 속성에 grid 값을 사용하여 그리드 레이아웃을 만듭니다. grid-template-columns 속성으로 열을 정의한 다음 grid-template-rows에 masonry 값을 지정합니다.

이렇게 하면 자동 배치된 그리드 항목으로 예상되는 레이아웃이 생성되지만 각 행의 항목은 메이슨리 레이아웃을 사용하며 이전 행의 작은 항목이 남긴 공간을 차지하도록 재정렬됩니다.

.masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: masonry;
  gap: 10px;
}

두 옵션 간에 고려해야 할 사항

이러한 메서드 간의 주목할 만한 차이점은 display: masonry 버전을 사용하면 masonry-template-tracks로 트랙을 지정하지 않아도 벽돌식 레이아웃이 표시된다는 것입니다. 따라서 display: masonry만으로도 충분할 수 있습니다. masonry-template-tracks의 초기 값이 repeat(auto-areas, auto)이기 때문입니다. 레이아웃은 컨테이너에 맞게 자동 크기 조정 트랙을 최대한 많이 만듭니다.

Masonry를 사용한 역방향 흐름

사양에는 Masonry 흐름의 방향을 변경하는 방법이 포함되어 있습니다. 예를 들어 블록 끝에서 위로 표시되도록 흐름을 변경할 수 있습니다.

제공업체: display: masonry

display: masonry로 그리드 레이아웃을 만든 다음 column-reverse 값을 사용하여 masonry-direction를 사용합니다.

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(3, 1fr);
  masonry-direction: column-reverse;
}

제공업체: display: grid

display: grid 및 grid-template-rows: masonry로 그리드 레이아웃을 만듭니다. 그런 다음 row-reverse의 새 값으로 grid-auto-flow 속성을 사용하여 항목이 그리드 컨테이너의 블록 끝에서 레이아웃되도록 합니다.

.masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: masonry;
  grid-auto-flow: row-reverse;
}

두 옵션 간에 고려해야 할 사항

display: masonry 버전은 flexbox가 작동하는 방식과 매우 유사합니다. column-reverse 값이 있는 masonry-direction 속성을 사용하여 열이 흐르는 방향을 변경합니다.

CSS 그리드 버전은 grid-auto-flow를 사용합니다. 현재 정의된 대로 grid-auto-flow: row-reverse와 grid-auto-flow: column-reverse은 동일한 효과를 제공합니다. 이로 인해 혼동이 발생할 수 있습니다. 다른 작업을 수행할 것으로 예상할 수 있기 때문입니다.

행의 그리드

방향을 변경하여 행을 정의할 수도 있습니다.

제공업체: display: masonry

display: masonry로 그리드 레이아웃을 만든 다음 masonry-direction 값을 row로 설정합니다. 행에 특정 블록 크기가 있어야 하는 경우가 아니라면 트랙 크기를 지정할 필요가 없습니다. 기본값은 auto이므로 트랙은 포함된 콘텐츠에 맞게 크기가 조정됩니다.

.masonry {
  display: masonry;
  masonry-direction: row;
}

제공업체: display: grid

.masonry {
  display: grid;
  grid-template-columns: masonry;
  grid-template-rows: repeat(3, 1fr);
}

두 옵션 간에 고려해야 할 사항

역전된 흐름과 마찬가지로 display: masonry 버전을 열에서 행으로 변경하면 masonry-direction 값이 변경됩니다. 그리드 버전을 사용하면 grid-template-columns 및 grid-template-rows 속성의 값을 전환해야 합니다. 또는 약어를 사용하는 경우 구문의 순서를 변경합니다.

두 흐름 전환 예시 모두에서 display: masonry 버전이 더 직관적입니다. 흐름을 제어하는 단일 속성 masonry-direction이 있으며, 다음 값 중 하나를 사용합니다.

• row
• column
• row-reverse
• column-reverse

그런 다음 기본 자동 값이 필요하지 않다고 가정하고 필요한 크기 조정 정보를 masonry-template-tracks에 추가합니다.

그리드에서는 역방향을 사용하려면 grid-auto-flow 속성을 사용해야 하고, 행 메이슨리를 사용하려면 grid-template-* 속성의 값을 전환해야 합니다. 현재 그리드 구문에서는 그리드 축의 값을 정의되지 않은 상태로 둘 수도 없습니다. masonry 값이 없는 축에는 항상 grid-template-* 속성을 지정해야 합니다.

항목 배치

두 버전 모두 그리드 레이아웃에서 익숙한 라인 기반 배치로 항목을 명시적으로 배치할 수 있습니다. 두 버전 모두 그리드 축에만 항목을 배치할 수 있습니다. 미리 정의된 트랙이 있는 축이며, 벽돌 레이아웃을 실행하는 축에는 항목을 배치할 수 없습니다.

제공업체: display: masonry

다음 CSS는 4개의 열이 있는 벽돌 레이아웃을 정의합니다. 따라서 그리드 축은 열입니다. a 클래스가 있는 항목은 첫 번째 열 선에서 세 번째 열 선까지 배치되어 새 masonry-track-* 속성으로 두 트랙에 걸쳐 있습니다. 이는 masonry-track: 1 / 3;의 약어로 정의할 수도 있습니다.

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(4, 1fr);
}

.a {
  masonry-track-start: 1;
  masonry-track-end: 3;
}

제공업체: display: grid

다음 CSS는 4개의 열이 있는 벽돌 레이아웃을 정의합니다. 따라서 그리드 축은 열입니다. a 클래스가 있는 항목은 첫 번째 열 선에서 세 번째 열 선까지 배치되며, grid-column-* 속성을 사용하여 트랙 2개에 걸쳐 있습니다. 이는 grid-column: 1 / 3;의 약어로 정의할 수도 있습니다.

그리드 축이 열이면 grid-row-* 속성이 무시되고 그리드 축이 행이면 grid-columns-* 속성이 무시됩니다.

.masonry {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: masonry;
}

.a {
  grid-column-start: 1;
  grid-column-end: 3;
}

두 구문 모두에서 이름이 지정된 선을 사용할 수 있습니다. 다음 예시에서는 a라는 두 개의 열 선이 있는 그리드를 보여줍니다.

제공업체: display: masonry

이름이 지정된 라인은 masonry-template-tracks의 트랙 목록 값에 정의됩니다. 이 항목은 a이라는 이름의 줄 뒤에 배치할 수 있습니다.

.masonry {
  display: masonry;
  masonry-template-tracks: 100px [a] auto [a] auto 100px;
}

.item {
  masonry-track: a;
}

제공업체: display: grid

이름이 지정된 라인은 grid-template-columns의 트랙 목록 값에 정의됩니다. 항목은 a라는 첫 번째 줄 뒤에 배치됩니다. grid-row 속성이 정의되면 무시됩니다.

.masonry {
  display: grid;
  grid-template-columns: 100px [a] auto [a] auto 100px;
  grid-template-rows: masonry;
}

.item {
  grid-column: a;
  grid-row: a; /* ignored */
}

두 구문에서 이름이 지정된 영역을 사용할 수도 있습니다. 다음 예에서는 'a', 'b', 'c'라는 세 개의 트랙이 있는 그리드를 보여줍니다.

제공업체: display: masonry

트랙의 이름은 masonry-template-areas 값으로 지정됩니다. 트랙 크기가 정의되지 않았으므로 세 트랙 모두 기본값인 auto 크기로 설정됩니다. 항목이 'a' 트랙에 배치됩니다.

.masonry {
  display: masonry;
  masonry-template-areas: "a b c";
}

.item {
  masonry-track: a;
}

행을 정의하든 열을 정의하든 동일하게 작동하며, masonry-direction 속성만 다릅니다.

제공업체: display: grid

열의 경우 구문이 기본적으로 동일합니다. 마찬가지로 트랙 크기가 정의되지 않았으므로 세 트랙 모두 기본적으로 auto 크기이지만 다른 축이 masonry임을 명시적으로 지정해야 합니다.

.masonry {
  display: grid;
  grid-template-areas: "a b c";
  grid-template-rows: masonry;
}

.item {
  grid-column: a;
}

하지만 행의 경우 grid-template-areas가 실제로 2차원 영역을 정의하고 각 행이 별도의 문자열로 작성되므로 값을 다르게 작성해야 합니다.

.masonry {
  display: grid;
  grid-template-areas: "a" "b" "c"; /* Note the difference, each row is quoted. */
  grid-template-columns: masonry;
}

.item {
  grid-row: a;
}

두 옵션 간에 고려해야 할 사항

어떤 포지셔닝을 사용하든 방향을 전환할 때는 display: masonry 문법이 더 효과적입니다. masonry-track-* 속성은 그리드 축이 어느 방향이든 작동하므로 방향을 변경하려면 masonry-direction 값만 변경하면 됩니다. 그리드 버전에서는 전환을 사용 설정하기 위해 최소한 중복 속성이 필요합니다. 하지만 그리드 버전에서는 방향을 변경하는 것이 더 복잡한 다른 방법은 이전 예시를 참고하세요.

약식 표기

이 게시물에서는 사용 중인 속성을 더 명확하게 하기 위해 긴 형식을 사용했지만, display: masonry 버전과 display: grid 버전 모두 약어를 사용하여 정의할 수 있습니다.

제공업체: display: masonry

display: masonry 약어는 masonry 키워드를 사용합니다. 기본 벽돌 레이아웃을 만들려면 다음 CSS를 사용하세요.

.masonry {
  display: masonry;
  masonry: repeat(3, 1fr);
}

간단한 행 기반 메이슨리 레이아웃을 만들려면 다음 단계를 따르세요.

.masonry {
  display: masonry;
  masonry: row;
}

단축키를 사용하여 트랙과 행 기반 레이아웃을 정의하려면 다음을 실행하세요.

.masonry {
  display: masonry;
  masonry: repeat(3, 1fr) row;
}

제공업체: display: grid

grid 약어를 사용하여 기본 masonry 레이아웃을 만듭니다.

.masonry {
  display: grid;
  grid: masonry / repeat(3, 1fr);
}

간단한 행 기반 메이슨리 레이아웃을 만들려면 다음 단계를 따르세요.

.masonry {
  display: grid;
  grid: repeat(3, auto) / masonry;
}

더 복잡한 예에서는 전체 display:masonry 구문이 더 간단하므로 지나치게 복잡해지지 않고도 더 많은 속성을 약식으로 함께 묶을 수 있습니다.

예를 들어 하단에서 위로 채워진 'a', 'b', 'c'라는 세 개의 열을 만든다고 가정해 보겠습니다.

제공업체: display:masonry

display: masonry에서는 이 세 가지를 모두 다음과 같은 약식으로 설정할 수 있습니다.

.masonry {
  display: masonry;
  masonry: column-reverse "a b c";
}

크기가 자동으로 조정되므로 크기를 지정할 필요는 없지만 특정 크기를 원하는 경우 추가할 수 있습니다. 예를 들면 masonry: column-reverse 50px 100px 200px "a b c";입니다.

또한 각 구성요소는 자유롭게 재정렬할 수 있으며 기억해야 하는 특정 순서는 없습니다. 행을 대신 사용하려면 column-reverse를 row 또는 row-reverse로 바꾸기만 하면 됩니다. 나머지 문법은 동일하게 유지됩니다.

제공업체: display: grid

display: grid에서는 다음 세 가지 측면을 별도로 설정해야 합니다.

.masonry {
  display: grid;
  grid-template-rows: masonry;
  grid-template-areas: "a b c";
  grid-auto-flow: wrap-reverse;
}

메이슨리 예와 마찬가지로 이렇게 하면 모든 열이 auto 크기가 되지만 명시적 크기를 제공하려면 다음을 실행하면 됩니다.

.masonry {
  display: grid;
  grid: masonry / 50px 100px 200px;
  grid-template-areas: "a b c";
  grid-auto-flow: wrap-reverse;
}

또는 'grid'를 사용하여 크기와 영역 이름을 모두 설정하려면 다음을 사용합니다.

.masonry {
  display: grid;
  grid: "a b c" masonry / 50px 100px 200px;
  grid-auto-flow: wrap-reverse;
}

이 두 예시 모두에서 순서가 엄격하게 요구되며, 행을 원하는 경우 순서가 달라집니다. 예를 들어 행으로 변경하면 다음과 같습니다.

.masonry {
  display: grid;
  grid: 50px 100px 200px / masonry;
  grid-template-areas: "a" "b" "c";
}

또는 다음과 같이 하나의 약어로 표현할 수 있습니다.

.masonry {
  display: grid;
  grid: "a" 50px "b" 100px "c"  200px / masonry;
}

두 옵션 간에 고려해야 할 사항

display: masonry 약어는 비교적 간단한 약어이므로 널리 사용될 가능성이 높습니다. 많은 경우 '표준' 격자 레이아웃의 경우 트랙 정의만 설정하면 됩니다. 다른 모든 값은 기본값을 가정할 수 있습니다.

display: grid 버전은 기존 grid 약어를 사용합니다. 이 약어는 상당히 복잡한 약어이며 개발자가 사용하는 빈도가 낮은 것으로 파악됩니다. 앞의 예에서 볼 수 있듯이 간단한 벽돌 레이아웃에 사용되는 경우에도 값의 순서를 설정할 때 주의해야 합니다.

기타 고려사항

이 게시물에서는 오늘날의 몇 가지 일반적인 사용 사례를 살펴봅니다. 하지만 그리드나 메이슨리가 앞으로 어떻게 될지는 알 수 없습니다. 별도의 display: masonry 문법을 사용하는 큰 이유는 향후 두 가지가 달라질 수 있기 때문입니다. 특히 masonry-template-tracks와 같은 초기 값의 경우 그리드와는 다른 작업을 메이슨리에서 실행하는 것이 유용할 수 있습니다. display: grid 버전을 사용하면 그리드 기본값을 변경할 수 없으므로 향후 수행하려는 작업이 제한될 수 있습니다.

이 예시에서는 브라우저가 masonry를 사용하는 경우 그리드에서 유효한 속성을 무시해야 하는 위치를 확인할 수 있습니다. 예를 들어 grid-template-areas에서는 2차원 그리드 레이아웃을 정의하므로 대부분의 값이 전달되지만, Masonry에서는 한 방향만 완전히 정의합니다.

의견 보내기

이 예시와 각 버전을 나란히 배치한 사양 초안을 살펴보세요. 문제 9041에 댓글을 남겨 의견을 알려주세요. 블로그나 소셜 미디어에 게시물을 작성하는 경우 X 또는 LinkedIn을 통해 알려주세요.