게시일: 2024년 9월 19일
CSS 워킹 그룹은 두 가지 CSS masonry 제안을 하나의 초안 사양으로 결합했습니다. 이를 통해 두 가지 옵션을 더 쉽게 비교하고 최종 결정을 내릴 수 있기를 바랍니다. Chrome팀은 여전히 별도의 masonry 구문이 가장 좋은 방법이라고 생각합니다. 이전 게시물에 언급된 가장 큰 성능 문제는 해결되었지만 문법, 초깃값, 그리드와 결합된 버전을 얼마나 쉽게 학습할 수 있는지에 대한 우려는 여전히 남아 있습니다.
그러나 가정을 테스트하기 위해 레이아웃이 각 버전에서 어떻게 작동하는지 보여주는 몇 가지 예를 살펴봤습니다. 이 게시물의 예시를 살펴보고 의견을 보내주세요. 그러면 YouTube에서 결정을 내리고 이 기능을 진행할 수 있습니다.
이 게시물에서는 가능한 모든 사용 사례를 다루지는 않지만 격자 레이아웃에서 마스터리 레이아웃을 분리해도 기능이 부족해지지 않는다는 점은 분명합니다. 사실 그 반대일 수도 있습니다. 이 게시물에서 볼 수 있듯이 display: masonry 버전은 새로운 기회와 더 간단한 문법을 제공합니다.
또한 석조로 항목을 재정렬하면 접근성 문제가 발생할 수 있다는 우려가 많았습니다. 이는 제안된 reading-flow 속성을 통해 두 버전의 구문 모두에서 해결되고 있습니다.
기본 석재 레이아웃
석조 레이아웃이라고 하면 대부분의 사람들이 이 레이아웃을 떠올립니다. 항목이 행으로 표시되며 첫 번째 행이 배치된 후 후속 항목은 더 짧은 항목이 남긴 공간으로 이동합니다.
제공업체: display: masonry
masonry 레이아웃을 만들려면 display 속성에 masonry 값을 사용합니다. 이렇게 하면 정의한 열 트랙 (또는 콘텐츠에 의해 정의된 열 트랙)과 다른 축의 masonry가 있는 masonry 레이아웃이 생성됩니다. 첫 번째 항목은 블록 및 인라인 시작 부분에 표시되며 (따라서 영어로 왼쪽 상단) 항목은 인라인 방향으로 배치됩니다.
트랙을 정의하려면 CSS 그리드 레이아웃에 사용된 트랙 목록 값과 함께 masonry-template-tracks를 사용하세요.
.masonry {
display: masonry;
masonry-template-tracks: repeat(3, 1fr);
gap: 10px;
}
제공업체: display: grid
masonry 레이아웃을 만들려면 먼저 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 흐름의 방향을 변경하는 방법이 포함되어 있습니다. 예를 들어 블록 끝에서 위로 표시되도록 흐름을 변경할 수 있습니다.
제공업체: 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의 작동 방식과 매우 유사합니다. masonry-direction 속성의 값을 column-reverse로 사용하여 열의 흐름 방향을 변경합니다.
CSS 그리드 버전은 grid-auto-flow를 사용합니다. 현재 정의된 grid-auto-flow: row-reverse와 grid-auto-flow: column-reverse는 동일한 효과를 줍니다. 다른 작업을 할 것으로 예상할 수 있으므로 혼란스러울 수 있습니다.
행의 석조물
방향을 변경하여 행을 정의할 수도 있습니다.
제공업체: display: masonry
display: masonry로 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이 있으며 다음 값 중 하나를 사용합니다.
rowcolumnrow-reversecolumn-reverse
그런 다음 기본 자동 값이 필요하지 않다고 가정하여 masonry-template-tracks에 필요한 크기 조정 정보를 추가합니다.
그리드에서 방향을 반대로 하려면 grid-auto-flow 속성을 사용해야 하며 행 마사리 레이아웃을 실행하려면 grid-template-* 속성의 값을 전환해야 합니다. 또한 현재 그리드 문법에서는 그리드 축의 값을 정의되지 않은 상태로 둘 수 없습니다. 값이 masonry가 아닌 축에는 항상 grid-template-* 속성을 지정해야 합니다.
항목 위치 지정
두 버전 모두 그리드 레이아웃에서 익숙한 선 기반 배치를 사용하여 항목을 명시적으로 배치할 수 있습니다. 두 버전 모두 그리드 축에만 항목을 배치할 수 있습니다. 이 축은 사전 정의된 트랙이 있는 축이며 masonry 레이아웃을 실행하는 축에는 항목을 배치할 수 없습니다.
제공업체: 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-* 속성으로 두 트랙에 걸쳐 있습니다. 이는 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;
}
masonry 예와 마찬가지로 이렇게 하면 모든 열이 auto 크기가 되지만 명시적 크기를 제공하려면 다음과 같이 하면 됩니다.
.masonry {
display: grid;
grid: masonry / 50px 100px 200px;
grid-template-areas: "a b c";
grid-auto-flow: wrap-reverse;
}
또는 '그리드'를 사용하여 크기와 지역 이름을 모두 설정하려면 다음을 실행합니다.
.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 약어를 사용합니다. 이 약어는 상당히 복잡하며 개발자가 자주 사용하지 않는 것으로 확인되었습니다. 앞의 예에서 볼 수 있듯이 간단한 격자 레이아웃에 사용되더라도 값의 순서를 설정할 때는 주의해야 합니다.
기타 고려사항
이 게시물에서는 현재의 몇 가지 일반적인 사용 사례를 살펴봅니다. 하지만 그리드 또는 masonry의 미래는 알 수 없습니다. 별도의 display: masonry 문법을 사용하는 큰 이유는 향후 두 가지가 달라질 수 있기 때문입니다. 특히 초기 값(예: masonry-template-tracks의 값)의 경우 그리드와는 다른 방식으로 석재 벽면을 구성하는 것이 유용할 수 있습니다. display: grid 버전을 사용하면 그리드 기본값을 변경할 수 없으므로 향후 수행하려는 작업이 제한될 수 있습니다.
이 예에서는 masonry를 사용하는 경우 브라우저가 그리드에서 유효한 속성을 무시해야 하는 위치를 확인할 수 있습니다.
예를 들어 grid-template-areas는 2차원 그리드 레이아웃을 정의하므로 대부분의 값이 삭제됩니다. masonry에서는 한 방향만 완전히 정의합니다.
의견 보내기
이러한 예시와 각 버전을 나란히 보여주는 초안 사양을 살펴보세요. 문제 9041에 댓글을 남기거나 블로그나 소셜 미디어에 게시물을 작성하려면 X 또는 LinkedIn을 통해 알려주세요.