벽돌식 레이아웃: CSS 및 JS 방식

매슨리 레이아웃은 각 항목이 다음으로 사용 가능한 세로 공간을 채우도록 열에 배치합니다. 핀터레스트처럼 작동합니다. 항목의 열 너비는 같지만 높이는 다양합니다. 그 결과 행 사이에 낭비되는 빈 공간이 없는 조밀하고 시각적으로 역동적인 그리드가 만들어집니다.

플래그를 활성화한 크롬과 파이어폭스에서는 grid-template-rows: masonry를 지원합니다. 항목은 열에 배치되지만 행 크기는 콘텐츠 높이에 맞춰지므로, 높이가 서로 다른 항목이 빈틈없이 배치됩니다. 이것이 앞으로 제공될 네이티브 방식입니다.

CSS 열은 매슨리와 비슷한 레이아웃을 만듭니다. columns: 3; column-gap: 1rem을 사용하십시오. 항목은 각 열 안에서 위에서 아래로 자동으로 흐릅니다. 제한 사항은 항목이 행 단위가 아니라 열 단위로(1열의 위쪽, 2열의 위쪽...) 정렬된다는 점이며, 이는 읽기 순서와 접근성에 영향을 줍니다.

각 항목에 break-inside: avoid를 적용해 항목이 열 사이에서 나뉘지 않도록 하십시오. 이를 적용하지 않으면 높이가 큰 카드가 두 열에 걸쳐 분할되어 콘텐츠가 중간에서 잘릴 수 있습니다. 카드와 같은 콘텐츠에 CSS 열을 사용할 때는 항상 이 속성을 추가하십시오.

Masonry.js(데이비드 DeSandro가 만든)는 열 높이를 계산하고 각 항목을 가장 짧은 열에 배치하여 절대 위치로 배치된 항목을 재배치합니다. 아이소톱은 여기에 정렬과 필터링 기능을 추가합니다. 두 라이브러리 모두 위치를 계산하고 적용하려면 JavaScript가 필요합니다.

가벼운 방식은 고정된 열과 1px 행으로 그리드를 정의한 다음, 콘텐츠 높이 / 행 높이를 기준으로 각 항목에 JS로 grid-row-end: span N을 설정하는 것입니다. 항목은 그리드 행 정렬을 유지하면서 높이를 다양하게 만들 수 있습니다.

창 크기가 바뀌거나 이미지가 로드되면 매슨리 위치가 오래된 상태가 됩니다. ResizeObserver로 크기 변경을 감지하고 재계산을 시작하십시오. 빠른 크기 조정 이벤트 중 과도한 계산을 피하려면 재계산을 디바운스하십시오.

높이를 알 수 없는 이미지는 로드가 완료된 후 매슨리를 재계산하게 만듭니다. 모든 이미지에 명시적인 너비 및 높이 속성을 제공하여 브라우저가 로드 전에 공간을 예약하도록 하십시오. 이렇게 하면 위치 이동을 방지하고 재계산 횟수를 줄일 수 있습니다.

매슨리 레이아웃에 항목을 추가할 때는 전체 그리드가 아니라 영향을 받는 열(새 항목이 들어간 열)만 재계산해야 합니다. Masonry.js 같은 라이브러리는 새 묶음이 추가될 때 항목 애니메이션과 증분 레이아웃을 지원하므로 매번 전체 레이아웃을 다시 배치하지 않아도 됩니다.

JavaScript로 위치를 지정한 레이아웃에서는 시각적 매슨리 순서가 DOM 순서와 다릅니다. Tab 순서가 시각적 위치가 아니라 DOM 순서(논리적 읽기 순서)를 따르는지 확인하십시오. tabindex를 신중하게 추가하거나 키보드 탐색에서 자연스러운 DOM 흐름을 사용하십시오.

CSS 열은 간단하고 JS가 필요 없지만, 읽기 순서가 행 순서가 아닌 열 순서이고 필터링이나 정렬을 지원하지 않습니다. 그리드 매슨리는 아직 실서비스에서 지원되지 않습니다. JS 매슨리는 기능이 풍부하지만 위치를 콘텐츠 로드 후 계산하므로 코드 용량이 늘고 렌더링 지연이 발생합니다.

어떤 CSS 속성이 카드가 두 CSS 열에 걸쳐 분할되는 것을 방지하나요?

매슨리 레이아웃은 CSS 열(간단하지만 열 순서), 실험적인 grid-template-rows: masonry(미래 지향적 방식), 또는 Masonry.js 같은 JavaScript 라이브러리(정렬과 필터링을 지원하는 완전한 기능)로 구현할 수 있습니다. 각 방식은 단순성, 접근성, 기능 사이에서 서로 다른 절충점을 가집니다.