masonry-auto-flow

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

masonry-auto-flow は CSS のプロパティで、CSS グリッドレイアウトにおいて組積を使用する際のアイテムの配置方法を変更します。

構文

css

/* キーワード値 */
masonry-auto-flow: pack;
masonry-auto-flow: next;
masonry-auto-flow: ordered;
masonry-auto-flow: definite-first;
masonry-auto-flow: next ordered;

/* グローバル値 */
masonry-auto-flow: inherit;
masonry-auto-flow: initial;
maosnry-auto-flow: revert;
masonry-auto-flow: unset;

このプロパティは 2 つの形式のうちの 1 つから成ります。

  • 単一のキーワード: pack, next, definite-first, ordered のうちの何れか
  • 2 つのキーワード。例えば next ordered。

値

pack

既定の組積アルゴリズムで、アイテムは最も余裕のあるトラックに配置されます。

next

アイテムはグリッド軸に次々と配置されていきます。

definite-first

既定の組積アルゴリズムのように、場所が確定しているアイテムを最初に配置してから、他の組積アイテムを配置するように表示します。

ordered

配置が確定しているものは無視して、すべてを order で変更した文書順に従って配置します。

公式定義

初期値pack
適用対象マソンリーレイアウトのグリッドコンテナー
継承なし
計算値指定通り
アニメーションの種類離散値

関連情報

masonry-auto-flow = 
  [ pack | next ]               ||
  [ definite-first | ordered ]

例

next キーワードの使用

HTML

html

<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
  <div id="item4"></div>
  <div id="item5"></div>
</div>
<select id="flow">
  <option value="pack">pack</option>
  <option value="next">next</option>
</select>

CSS

css

#grid {
  height: 200px;
  width: 200px;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: masonry;
  masonry-auto-flow: pack;
}

#item1 {
  background-color: lime;
  height: 2em;
}

#item2 {
  background-color: yellow;
}

#item3 {
  background-color: blue;
  height: 3em;
}

#item4 {
  background-color: red;
  height: 2.5em;
}

#item5 {
  background-color: aqua;
  height: 4em;
}

js

const selectElem = document.querySelector("select");

function changeMasonryFlow() {
  var grid = document.getElementById("grid");
  var direction = document.getElementById("flow");
  var masonryAutoFlow = direction.value === "pack" ? "pack" : "next";

  grid.style.masonryAutoFlow = masonryAutoFlow;
}

selectElem.addEventListener("change", changeMasonryFlow);

結果

仕様書

Specification
CSS Grid Layout Module Level 3
# masonry-auto-flow

ブラウザーの互換性

BCD tables only load in the browser

関連情報