【CSS新時代】Masonryレイアウトがついに標準化へ！CSS Grid Lanes（grid-template-rows: masonry）の使い方と実装テクニック

Web技術
2026.09.01

Pinterestや画像ギャラリーサイト、ポートフォリオなどで定番となっている「Masonry（メイソンリー / 石積み）レイアウト」。

カードや画像の高さがバラバラであっても、上下の不要な隙間をギュッと詰めてタイルのように美しく敷き詰めるこのレイアウトは、限られた画面領域を有効に活用できる優れたUIです。

しかし、これまでのWeb制作においてMasonryレイアウトを組もうとすると、以下のような大きな妥協や工数が必要でした。

  • Masonry.jsやIsotopeといった外部の重量級JavaScriptライブラリを読み込み、DOM要素の位置を絶対座標（position: absolute）で計算させていた
  • CSSの column-count（段組み）で代用しようとしたが、コンテンツの並び順が「左から右」ではなく「上から下（縦並び）」になってしまい、時系列やニュース一覧で使えない
  • 画像の遅延読み込み（Lazy Load）によって高さがズレてレイアウトが崩れ、画面が激しくガタつく（CLSの悪化）

これらの長年フロントエンド開発者を悩ませてきた「Masonryのジレンマ」を根本から解決する仕様として、W3C（CSSワーキンググループ）で長らく議論されていた標準化が、ついに「CSS Grid Lanes（CSS Gridの一環としてのMasonry）」として決着し、ブラウザへの実装が本格化しています。

本記事では、従来のMasonry実装が抱えていた欠点から、新しい標準仕様「CSS Grid Lanes（`grid-template-rows: masonry`）」の基本的な書き方、カードごとのスパン（結合）指定、JavaScriptライブラリとの違い、そして未対応ブラウザへのフォールバック（段階的対応）まで、徹底解説します！

1. 従来のMasonry実装が抱えていた「3大ストレス」

なぜCSS標準のMasonryがこれほど待ち望まれていたのか、従来の3つの実装方法とその限界を振り返ってみましょう。

実装手法 メリット 致命的なデメリット・課題
① JavaScriptライブラリ（Masonry.jsなど） 確実に左から右へ綺麗に敷き詰められる ・JSが読み込まれて実行されるまで配置が決まらない（表示遅延）
・絶対配置（absolute）で展開されるためリサイズやフォント読み込みに弱い
・ファイル容量が重くCore Web Vitals（INPやLCP）に悪影響
② CSS column-count（段組み） CSSだけで手軽に書け、ライブラリ不要 ・コンテンツが**「左列を上から下へ埋めてから、次の右列へ」**流れる
・最新順に左から右へ並べたい一覧画面では順序が破綻する
③ CSS Flexbox（縦並び） コンテナの高ささえ固定すればCSSで完結 ・コンテナの明示的な高さ指定が必要になり、動的コンテンツで破綻する
・レスポンシブ時のブレイクポイント調整が極めて困難

「CSSだけで、かつ左から右へ自然な読み順を維持したまま、上下の隙間だけを詰めたい」というWeb制作の長年の悲願を叶えるのが、今回のCSS Grid Lanesです。

2. CSS Grid Lanesとは？何が決着したのか

Masonryレイアウトの標準化を巡っては、仕様策定の現場で数年間にわたり激しい議論が交わされていました。

  • 独立した新仕様派（display: masonry）：CSS Gridとは完全に切り離し、専用の新しいディスプレイ値を作るべきという意見（主にWebKit / Apple陣営）。
  • CSS Grid統合派（display: grid の拡張）：既存のCSS Gridのサブ機能（行または列の敷き詰め）として仕様を統合すべきという意見（主にGoogle Chrome / Chromium陣営）。

結果として、「CSS Gridの枠組みの中に統合し、レーン（Lanes）として扱う」という方向性で合意が形成されました。これにより、開発者は使い慣れた display: grid のプロパティ体系や gap、grid-column などのグリッドプロパティをそのまま流用してMasonryを制御できるようになりました。

3. 【基本コード】わずか数行で動くCSS Masonryの書き方

実装は驚くほどシンプルです。親コンテナに display: grid を指定し、行の定義（grid-template-rows）に masonry というキーワードを指定するだけです。

HTMLマークアップ例

<div class="masonry-container">
  <div class="card">
    <img src="photo-01.jpg" alt="風景写真">
    <p>短いテキストが入ります。</p>
  </div>
  <div class="card">
    <img src="photo-02.jpg" alt="ポートレート写真">
    <p>こちらは少し長めの説明文が入ります。テキストの分量によってカードの高さが動的に変化します。</p>
  </div>
  <div class="card">
    <img src="photo-03.jpg" alt="建築写真">
    <p>中くらいのテキストです。</p>
  </div>
  <!-- 任意の数のカード要素 -->
</div>

CSS完全コード

.masonry-container {
  display: grid;
  /* 横方向：自動フィットで最小280pxの列を繰り返し生成 */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  
  /* ★ 縦方向：上下の隙間を自動で詰めるMasonryレイアウトを指定 */
  grid-template-rows: masonry;
  
  /* アイテム間の余白 */
  gap: 20px;
}

.card {
  background-color: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.card img {
  width: 100%;
  height: auto;
  display: block;
}

.card p {
  padding: 16px;
  margin: 0;
  line-height: 1.6;
}

【従来のCSS Gridとの違い】
従来の display: grid では、同じ行（横並び）に存在するカードの中で「最も背が高いカード」に引っ張られ、背の低いカードの下には不要な空白（デッドスペース）が生まれてしまっていました。
しかし grid-template-rows: masonry; を1行添えるだけで、各カードは上のカードの真下に向かって重力に従うようにスルスルと吸着し、隙間なく綺麗に埋め尽くされます。

4. 応用テクニック：アイテムの結合と横断配置

CSS Gridの強みをそのまま受け継いでいるため、特定の注目カードだけ「2列分にまたがって大きく見せる（スパン）」といった雑誌のようなレイアウトも簡単に実現できます。

/* 特定の注目アイテムを2カラム分に広げる */
.card.featured {
  grid-column: span 2;
}

/* 画面幅が狭いスマホでは自動的に1カラムに戻る */
@media (max-width: 640px) {
  .card.featured {
    grid-column: span 1;
  }
}

JavaScriptでこれを組もうとすると座標の再計算が破綻しがちでしたが、ブラウザのレンダリングエンジンが自動で空いているスペースを検知して最適に流し込んでくれます。

5. 未対応ブラウザへのフォールバック（@supports の活用）

標準化が進んでいるとはいえ、ユーザーの環境によってはまだMasonryプロパティが有効になっていないブラウザが存在します。
商用サイトの実務案件では、**「Masonryが動く環境では最新の敷き詰めを行い、未対応環境でもレイアウトが崩れず通常のグリッドとして綺麗に見せる」**というプログレッシブ・エンハンスメントの設計が鉄則です。

/* ① 基本スタイル：未対応ブラウザ向けのフォールバック（通常のCSS Grid） */
.masonry-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  align-items: start; /* カードの高さを揃えず、上揃えにしておく */
}

/* ② 最新ブラウザ向け：Masonryに対応している場合のみ有効化 */
@supports (grid-template-rows: masonry) {
  .masonry-container {
    grid-template-rows: masonry;
  }
}

この記述をしておけば、未対応ブラウザではカードの下に少し余白が出る通常のグリッド表示になり、対応ブラウザでは自動的に上下の隙間がギュッと詰まった美しいMasonryへと自然にアップグレードされます。

6. 実装時に押さえておくべきパフォーマンスとCLS対策

CSS Masonryをサイトに導入する際、検索順位（SEO）やUXを落とさないために注意すべきポイントです。

画像の aspect-ratio またはサイズ明示

Masonryレイアウトは「各要素の高さ」に依存して配置が決まります。画像が読み込まれる前に高さが「0px」と判定されると、画像がダウンロードされた瞬間に下のカードが大きく押し下げられ、**CLS（Cumulative Layout Shift：視覚的な安定性）**の数値が大幅に悪化してしまいます。

/* 画像の元アスペクト比をCSSで指定し、読み込み前の領域を確保する */
.card img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9; /* または各画像の比率 */
}

7. まとめ：脱JavaScriptで、軽量かつ美しいWebサイトへ

CSS Grid LanesによるMasonryレイアウトの標準化は、フロントエンド開発における長年の悲願でした。

  1. 重たい外部ライブラリ（Masonry.js）を捨て、数行のCSSだけで実装できる。
  2. 左から右への自然なコンテンツの読み順（DOM順序）を維持できる。
  3. grid-column: span 2 などのグリッドプロパティと組み合わせた自由自在なデザインが可能。
  4. @supports (grid-template-rows: masonry) による安全なフォールバックで今すぐ実務導入できる。

ブラウザのネイティブ機能をフルに活用し、表示速度が速くメンテナンス性の高いモダンなWebサイトを構築していきましょう！

関連記事
👉 【完全保存版】WordPressサーバー移行の全手順！現役エンジニアが失敗しない手順と注意点を徹底解説

OFFICETAKECでは、最新のCSS仕様やモダンフロントエンド技術を取り入れた高速で美しいWebサイト制作、ポートフォリオ・メディア構築、WordPress保守管理まで幅広く対応しております。レイアウト設計や表示速度改善でお困りの際はお気軽にお問い合わせください。

👉 Webサイト制作・レイアウト設計のご相談はこちら（お問い合わせフォームへ）

(Visited 8 times, 1 visits today)
タイトルとURLをコピーしました