shwldshwld19 days ago

CSS columnsで手軽にMasonryレイアウトを実現する

カード一覧をMasonryレイアウト（Pinterest風の段違いグリッド）にしたいとき、CSS columns プロパティで簡単に実現できる。JavaScriptライブラリなしでレスポンシブ対応もできる。

.masonry-grid {
  columns: 3 300px; /* 最大3列、1列の最小幅300px */
  column-gap: 1rem;
}

.masonry-grid > * {
  break-inside: avoid; /* カードが列をまたがないようにする */
  margin-bottom: 1rem;
}

Tailwind CSSなら columns-3 と break-inside-avoid だけで済む。

<div class="columns-1 sm:columns-2 lg:columns-3 gap-4">
  <div class="break-inside-avoid mb-4">カード1（高さ可変）</div>
  <div class="break-inside-avoid mb-4">カード2</div>
  <div class="break-inside-avoid mb-4">カード3</div>
</div>

注意点:

  • CSS columnsは上から下に流れるので、並び順がグリッドと異なる（左→右ではなく上→下→次の列）
  • カード高さが固定の場合はMasonryにする意味が薄い。コンテンツの高さがバラつくときに効果的
  • break-inside: avoid を忘れるとカードが列の境界で分断される
shwldshwld