Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。
レイアウト Limited support

Masonry

Pinterestのようなタイル型レイアウトをCSSネイティブで実現する機能です。異なる高さのアイテムを隙間なく効率的に配置し、利用可能なスペースが最も多いレーンに順次アイテムを配置します。JavaScriptライブラリ（Masonry.js等）に依存せずに実装でき、パフォーマンスとメンテナンス性が向上します。

メイソンリータイルレイアウト

概要

Pinterestのようなタイル型レイアウトをCSSネイティブで実現する機能です。異なる高さのアイテムを隙間なく効率的に配置し、利用可能なスペースが最も多いレーンに順次アイテムを配置します。JavaScriptライブラリ（Masonry.js等）に依存せずに実装でき、パフォーマンスとメンテナンス性が向上します。

対応ブラウザ

デスクトップ

Chrome 未対応
Edge 未対応
Safari 未対応
Firefox 未対応

基本構文

CSS 
.gallery {
  display: grid-lanes;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

実務での使いどころ

  • 画像ギャラリーのタイル配置

    異なるサイズの画像をMasonryレイアウトで隙間なく配置し、Pinterest風のギャラリーを実現します。

注意点

  • 2026年3月時点でどのブラウザでも標準サポートされていません。実装にはJavaScriptライブラリの使用を検討してください。

アクセシビリティ

  • Masonryレイアウトでは視覚的な順序とDOM順序が異なる場合があるため、スクリーンリーダーでの読み上げ順序を確認してください。

参考リンク