メイソンリーレイアウト

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

CSS グリッドレイアウト仕様書の Level 3 では、 masonry の値が grid-template-columnsgrid-template-rows に含まれています。このガイドでは、メイソンリー(組積)レイアウトとは何か、どのように使用するかについて詳しく説明します。

メイソンリーレイアウトとは、一方の軸(多くの場合は列)が一般的な厳格なグリッドレイアウトを使用し、もう一方の軸がメイソンリーレイアウトを使用するレイアウト方法です。メイソンリーレイアウトでは、短いアイテムの後に隙間ができるような厳密なグリッドではなく、次の行のアイテムが隙間を完全に埋めるように立ち上がっていきます。

メイソンリーレイアウトの作成

最も一般的なメイソンリーレイアウトを作成するには、列がグリッドの軸、行が組積の軸になります。このレイアウトは grid-template-columnsgrid-template-rows で定義します。

css
.container {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  grid-template-rows: masonry;
}

このコンテナーの子要素は、通常のグリッドレイアウトの自動配置と同じように、アイテムごとに行に沿って配置されます。しかし、新しい行に移動すると、アイテムは組積アルゴリズムに従って表示されます。アイテムは最も余裕のある列に配置されるため、厳密な行のトラックがなくてもぎっしりとしたレイアウトになります。

また、アイテムを列にして読み込むメイソンリーレイアウトも可能です。

グリッド軸の制御

グリッド軸では、グリッドレイアウトで期待した通りに動作します。キーワード span を使えば、自動配置を維持したまま、アイテムを複数のトラックにまたがって配置することができます。また、線ベースの位置指定を使ってアイテムを配置することもできます。

アイテムをまたがらせるメイソンリーレイアウト

この例では、 2 つのアイテムが 2 本のトラックにまたがり、組積アイテムがそれを取り囲むように配置されています。

この例では、柱の位置が決まっているアイテムが含まれています。配置が確定しているアイテムは、メイソンリーレイアウトが行われる前に配置されます。

組積軸の制御

組積軸は、通常のグリッドの自動配置ルールではなく、組積のレイアウトルールに従っているため、異なるルールで動作します。この軸を制御するために、グリッド Level 3 仕様で定義されている 3 つの追加プロパティ align-tracksjustify-tracksmasonry-auto-flow があります。

masonry-auto-flow

masonry-auto-flow プロパティでは、組積アルゴリズムの動作を変更することができます。next という値を与えると、アイテムは空きスペースのあるトラックに入るのではなく、グリッド軸上に順番に表示されます。また、positioned という値を与えると、配置が確定しているアイテムを無視して、order で変更した文書順でアイテムを配置します。

align-tracks

align-tracks プロパティは、グリッドコンテナー内のアイテムをブロック軸の組積で整列させることができます。このプロパティは、フレックスレイアウトの動作と同じように、トラック内のアイテムを整列させます。このプロパティは align-content と同じ値を取りますが、複数の値を指定して、グリッド軸のトラックごとに異なる整列値を設定することができます。

トラックよりも多くの値を指定すると、追加の値は無視されます。値よりもトラックの数が多い場合、追加のトラックは最後に指定した値を使用します。

justify-tracks

justify-tracks プロパティは、 align-tracks と同じように動作しますが、組積の軸がインライン軸の場合に使用されます。

代替

組積に対応していないブラウザーでは、代わりに通常のグリッドの自動配置が使用されます。

ブラウザーの互換性

css.properties.grid-template-columns.masonry

BCD tables only load in the browser

css.properties.grid-template-rows.masonry

BCD tables only load in the browser

関連情報