CSS Masonry 레이아웃 — 그리드로 벽돌 쌓기, 어디까지 왔나

CSS Masonry는 높이가 제각각인 카드들을 벽돌 쌓듯 위로 촘촘히 채워 넣는 레이아웃 방식입니다. 핀터레스트 같은 화면, 그 들쭉날쭉한 벽돌담 배치를 말합니다. 오랫동안 자바스크립트 라이브러리나 CSS 컬럼으로 흉내 냈던 그걸, 이제 CSS 그리드가 grid-template-rows: masonry 한 줄로 직접 해내려는 중입니다.

다만 미리 말해두면, 2026년 현재 이건 아직 실험 단계입니다. 브라우저마다 플래그 뒤에 숨어 있고 문법도 논쟁 중이에요. 그래도 방향은 분명해서, 지금 개념을 잡아두면 정식 지원이 됐을 때 바로 갈아탈 수 있습니다.

왜 그리드만으로는 안 됐나

일반 CSS 그리드는 격자입니다. 행과 열이 반듯하게 맞물리죠. 카드 높이가 다 다르면 가장 큰 카드에 행 높이가 맞춰지면서 아래에 빈 공간이 뭉텅 생깁니다. 나는 예전에 이 빈틈을 없애보겠다고 카드마다 grid-row: span N을 계산해 붙인 적이 있는데, 이미지 로딩 후 높이가 바뀌면 다 틀어져서 결국 포기했습니다.

메이슨리는 발상이 다릅니다. 열(column)은 그리드처럼 반듯하게 나누되, 세로 방향은 격자를 버리고 가장 짧은 열에 다음 아이템을 얹는 식으로 채웁니다. 그래서 위쪽 정렬이 촘촘해지고 빈틈이 사라집니다.

문법 맛보기

제안된 문법은 그리드 위에 얹힙니다. 열은 평소처럼 grid-template-columns로 정의하고, 행 축에만 masonry 키워드를 줍니다.

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-template-rows: masonry;   /* 세로는 벽돌 쌓기 */
  gap: 16px;
}

이게 전부입니다. 자식 요소에 손댈 필요가 없어요. 높이가 제각각인 <figure> 카드를 그냥 나열하면 알아서 촘촘하게 붙습니다. 컬럼 기반 흉내(column-count)와 결정적으로 다른 점은, 메이슨리는 왼쪽에서 오른쪽으로 시각적 순서가 유지된다는 겁니다. 컬럼 방식은 1번 다음이 아래로 흘러 순서가 뒤죽박죽이 되죠.

지금 당장 쓰려면

정식 지원 전까지는 현실적인 대안이 두 갈래입니다.

나라면 지금은 컬럼 방식으로 깔되, 순서가 중요한 화면이면 JS를 쓰고, 메이슨리는 @supports로 감싸 점진적으로 얹겠습니다.

@supports (grid-template-rows: masonry) {
  .gallery { grid-template-rows: masonry; }
}

주의할 점

• 표준이 확정 안 됐다 — 그리드 안에 넣는 안과 별도 display: masonry로 빼는 안이 경쟁 중입니다. 문법이 바뀔 수 있어요.
• 접근성 — 시각적 순서와 DOM 순서가 어긋나면 키보드 탭 이동이 이상해집니다. 메이슨리는 DOM 순서를 지키니 이 점은 오히려 컬럼 방식보다 낫습니다.
• 가로 정렬을 포기하는 것이 핵심이라, 열은 맞지만 행은 절대 안 맞습니다. 데이터 표처럼 행 정렬이 필요하면 그냥 그리드를 쓰세요.

자주 묻는 질문

지금 프로덕션에 써도 되나요?

아직 이릅니다. 2026년 현재 대부분 브라우저에서 플래그를 켜야 동작하고 문법도 유동적입니다. 실무에선 컬럼이나 JS로 대응하고, 메이슨리는 @supports로 감싸 미래 대비만 해두는 걸 권합니다.

column-count로 만든 거랑 뭐가 다른가요?

가장 큰 차이는 아이템 순서입니다. column-count는 1·2·3번이 첫 열을 세로로 다 채운 뒤 다음 열로 넘어가서 좌우 읽기 순서가 깨집니다. 메이슨리는 왼쪽부터 차례로 가장 짧은 열에 얹어 시각적 순서가 자연스럽습니다.

카드 높이를 미리 몰라도 되나요?

네. 그게 메이슨리의 장점입니다. 브라우저가 렌더 시점에 각 아이템의 실제 높이를 재서 배치하므로, 이미지가 나중에 로드돼 높이가 바뀌어도 알아서 다시 정렬합니다. JS로 grid-row: span을 계산하던 삽질이 필요 없어집니다.