メイソンリーレイアウト

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

.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-tracks、justify-tracks、masonry-auto-flow があります。

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

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

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

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

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

• Native CSS Masonry Layout In CSS Grid