CSSグリッドレイアウトモジュール レベル3

1. はじめに

このセクションは規範的ではありません。

グリッドレイアウトは、CSSのレイアウトモデルで、 ボックスやその内容のサイズや配置を強力に制御する機能を持っています。 グリッドレイアウトは2次元レイアウトに最適化されています。 つまり、両軸でコンテンツの整列が求められる場合です。

多くのレイアウトは一般的なグリッドレイアウトで表現できますが、 両軸でアイテムをグリッドに制限すると、 Web上の一般的なレイアウトのいくつかが表現できなくなります。

このモジュールはその制約を取り除いたレイアウトシステムを定義し、 アイテムを片方の軸だけグリッド状のトラックに配置し、 もう一方の軸では順番に積み重ねることができます。 アイテムはこれまで配置されたアイテムのレイアウトサイズに基づき、 残りのスペースが最も多い列（または行）に配置されます。 このモジュールはCSS Gridに新しいアイテム配置戦略を追加し、 CSS Box Alignmentにも新たな整列機能を拡張します。

1.1. 背景と動機

1.1.1. 自動配置アイテムによるウォーターフォールレイアウト

メイソンリーレイアウトは、「ウォーターフォールレイアウト」とも呼ばれることがある、 画像や短い記事要約などのアイテムを 列ごとに一つずつ配置するWebデザインの一般的なパターンです。 マルチカラムレイアウトでは、 コンテンツが最初の列に縦に配置され、 次の列に溢れたときに移動しますが、メイソンリーレイアウトは、 新しいアイテムごとに列を選択し、 後で配置されるアイテムよりもレイアウトの上部に近くなるようにします。

Pinterestの検索結果ページはこのレイアウトの例です:

ここでは、各アイテムの高さは（コンテンツや列の幅によって）異なり、 DOMを調査すると （視覚的なコンテンツからは順序が分かりませんが） 各アイテムがその時点で最も高さが小さい列に配置されていることが分かります。

このレイアウトは表面的にはマルチカラムレイアウトに似ていますが、 下にスクロールすると、 レイアウトの「後の方」のアイテム（検索結果で重要度が低いものなど）に自然に到達できる利点があります。

このレイアウトは従来のCSSレイアウトモデルでは実現できません。 事前に各アイテムの高さが分かっているか、 JavaScriptでコンテンツの計測や配置を行う必要があります。

メイソンリーコンテナとauto配置アイテムを組み合わせることで、 このタイプのメイソンリーレイアウトが実現できます。

1.1.2. 一次元グリッドレイアウト

グリッドレイアウトは、 2軸での強力なトラックサイズ指定と明示的な配置が可能ですが、 レイアウトによっては1軸だけでアイテムの整列が必要な場合もあります。

メイソンリーコンテナと明示的配置アイテムを組み合わせることで、 このタイプの一次元グリッドレイアウトが実現できます。

この例は Douglas Grahamによるもので、 明示的な配置で各アイテムを指定した列に配置しています。 ただし、行はありません。 各列のアイテムは順番に積み重ねられます。 このレイアウトはグリッドレイアウトでは再現できません。 隣接する列のアイテム間の「スパン」関係が固定されておらず、 相対的な高さやバナーや広告アイテムの有無によって変わるからです。 また、フレックスレイアウトでも再現できません。 アイテムのソース順（読み取りや順次ナビゲーション、一列のモバイルレイアウト用）は 2列間を行き来する形になるためです。

1.2. 値の定義

この仕様書はCSSプロパティ定義の規約と [CSS2]に従い、 値定義構文は[CSS-VALUES-3]を使用します。 この仕様で定義されていない値型はCSS Values & Units [CSS-VALUES-3]で定義されています。 他のCSSモジュールと組み合わせることで、これらの値型の定義が拡張される場合があります。

プロパティ固有の値に加えて、すべてのプロパティは CSS全体キーワードも値として受け付けます。 可読性のため、明示的に繰り返していません。

2. メイソンリーレイアウトモデル

メイソンリーレイアウトは、 グリッドレイアウトのように 一軸（グリッド軸）で事前定義されたトラックにアイテムを配置し、 もう一方の軸（積み重ね軸）では フレックスレイアウトのように自由にフローさせます。 グリッドレイアウトと同様で、フレックスレイアウトと異なり、 メイソンリーレイアウトの自動配置は、 各トラックの長さをできるだけ均等に分配するようにアイテムを配置します。

グリッドアイテムは、 通常のblockifyと同様に形成されます。

（分かりやすくするため、グリッドアイテムやグリッドトラックは、 メイソンリーコンテナの場合、 メイソンリーアイテムやメイソンリートラックと呼ぶことができます。）

CSSプロパティは、特にこの仕様で指定されない限り 通常のグリッドコンテナと同じように動作します。 例えば、orderプロパティで アイテムの配置順序を指定できます。

注: サブグリッドアイテムはサポートされていますが、 サブグリッド化はグリッド軸のみで発生します。 詳細は§ 3.2 サブグリッドを参照してください。

メイソンリーコンテナは、 内容がメイソンリーレイアウトに参加するボックスです。 メイソンリーコンテナは、 カラムメイソンリーコンテナ であれば積み重ね軸がブロック軸であり、 ロウメイソンリーコンテナ であれば積み重ね軸がインライン軸です。

メイソンリーコンテナの比較

カラムメイソンリー	grid-template-columns: 1fr 2fr 3fr;
ロウメイソンリー	grid-template-rows: 1fr 2fr 3fr;

2.1. 並び替えとアクセシビリティ

メイソンリーレイアウトは、 基本的には前方（次のアイテムを現在のアイテムの下や端に配置し、 自然な「読み順」に沿う）に進行しますが、 場合によってはこれら二つを任意に切り替えることもあります。 簡単なケースでは、item-toleranceプロパティを使うことで、 ブロック軸で 自動配置アイテムの小さなサイズ差による逆戻り感を減らすことができます。 ただし、自動配置と明示的配置やスパンアイテムが混在する場合、 多少の逆戻りが発生する場合があります。

例えば次のマークアップ例では、 4番目のアイテムはスパンアイテムで、 1行目の残った空き列には収まりません。 一番高い空きスペースである1列目に配置されます。 spanが1の次のアイテムは、 空き列の中で「上」に配置され、 自然な読み順を逸脱します。

<section class=masonry>
  <div class=item>1</div>
  <div class=item>2</div>
  <div class="item tall">3</div>
  <div class="item wide">4</div>
  <div class=item>5</div>
  <div class=item>6</div>
  <div class=item>7</div>
</section>
<style>
.masonry {
  //FIXME display: something;
  grid-template-columns: repeat(5, auto);
}
.item { height: 50px; }
.item.wide { grid-column: span 3; }
.item.tall { height: 90px; }
</style>

同様に、明示的に特定トラックに配置されたアイテムは後続の自動配置アイテムが視覚的に順序外に配置される隙間を残すことがあります。

著者はこのような可能性を認識し、 逆戻りを最小限に抑え、フォーカスや読み順が追いやすいレイアウトを設計するべきです。 逆に、アイテムが本質的な順序を持たない場合は、 reading-flowプロパティを使って、 読み取りや線形ナビゲーションのためにUAにアイテムの順序変更を許可できます。

ここでは自動配置アイテムの並び替えがデフォルト動作であるべき？

グリッドレイアウトやフレックスレイアウトと同様に、 orderプロパティで アイテムの順序を並び替えられます。 注意点も同様です。 詳しくはCSS Grid Layout 2 § 4 並び替えとアクセシビリティや CSS Flexbox 1 § 5.4.1 並び替えとアクセシビリティを参照してください。

2.2. メイソンリーレイアウトの確立

something

この値は要素にメイソンリーコンテナボックスを生成します。

メイソンリーコンテナが グリッド軸でサブグリッド化されていない場合、 内容に対して独立フォーマットコンテキストを確立します。

3. メイソンリートラックの仕様

グリッド軸では、 グリッドレイアウトのトラック指定の強力な機能をすべて利用できます。

• トラックサイズ、ライン名、エリアはメイソンリーコンテナのグリッド軸に グリッドレイアウトと同様に指定できます。

• 明示的グリッドと暗黙的グリッドは、 通常のグリッドコンテナと同様に形成されます。

• アイテムはこれらのグリッドテンプレートに配置できます。 グリッドレイアウトと同様です。

ただし、自動配置アイテムは配置されるトラックだけでなく、すべてのトラックにサイズ寄与します。 詳しくは§ 3.4 グリッド軸トラックのサイズ指定を参照してください。

注: これは自動配置アイテムが配置される時点でレイアウトされる必要があり、 各トラックがどれだけ「満たされている」か（次に自動配置アイテムをどのトラックに配置すべきか）を知るためです。 そのため、アイテムがレイアウト時に利用可能なスペースを知れるよう、トラック自体がすでに明確なサイズを持っている必要があります。

3.1. メイソンリートラックテンプレートの宣言: grid-template-*プロパティ

grid-template-*やgrid-auto-rows/grid-auto-columnsプロパティ （およびそのショートハンド）は グリッド軸の メイソンリーコンテナに適用され、 通常のグリッドコンテナ同様にトラックを確立します。 （積み重ね軸では無視されます。）

3.1.1. 固有トラックとrepeat()

コンテンツベースの自動繰り返しトラックを許可すべきか？ この定義は妥当か？ グリッドレイアウトでも機能すべきか？[Issue #10915]

グリッドレイアウトでは、 すべてのグリッドアイテムがトラックサイズ計算前にグリッドに配置されます。 つまり、auto-fill/auto-fitの繰り返しは autoのような固有サイズトラックを含められません（repeat()関数内や固定部分のトラックリストで）、 というのは、レイアウトアルゴリズムが そのトラックにどのアイテムが入るかをすでに決定している必要があり、 トラックサイズが決まり、 利用可能スペースにいくつ繰り返しが収まるか決定する必要があるためです。

メイソンリーレイアウトでは、 メイソンリーアイテムの配置とレイアウトが絡み合い、やや単純化されているので、 この制約は厳密には不要です。 サイズ指定の定義は多少ヒューリスティックになりますが、 自動繰り返しに固有サイズトラックを メイソンリーコンテナ内で含めることが可能です。

3.2. サブグリッド

サブグリッド化により、入れ子になったメイソンリーコンテナ（およびグリッドコンテナ）は トラックサイズを共有できます。 親の該当軸がグリッド軸の場合、 サブグリッド軸は親コンテナからグリッドコンテナ同様に指定されます。 親の対応軸が積み重ね軸の場合、 サブグリッド軸はmasonryのように振る舞います。

注: これにより両軸でmasonryになる場合、 メイソンリーコンテナの両軸masonryテンプレートとして通常通り解決されます。 つまりgrid-template-columns: none; grid-template-rows: masonryのように動作します。

メイソンリーレイアウトでは、 自動配置されたサブグリッドは親グリッドからライン名を継承しません。 これは、アイテムの配置がレイアウト結果に依存してしまうためです。 ただし、サブグリッドのトラックは通常通り親のトラックに揃えられます。

サブグリッド例です:

<style>
.grid {
  //FIXME: display: inline something;
  grid-template-rows: auto auto 100px;
  align-content: center;
  height: 300px;
  border: 1px solid;
}

.grid > * {
  margin: 5px;
  background: silver;
}
.grid > :nth-child(2n) {
  background: pink;
}

.grid subgrid {
  display: grid;
  grid: subgrid / subgrid;
  grid-row: 2 / span 2;
  grid-gap: 30px;
}
.grid subgrid > * { background: cyan; }
</style>

<div class="grid">
  <item>1</item>
  <item>2</item>
  <item>3</item>
  <subgrid>
    <item style="height:100px">subgrid.1</item>
    <item>sub.2</item>
    <item>s.3</item>
  </subgrid>
  <item>4</item>
  <item>5</item>
  <item style="width: 80px">6</item>
  <item>7</item>
</div>

サブグリッドの最初のアイテム（"subgrid.1"）が 親グリッドの2行目の固有サイズに寄与していることに注目してください。 サブグリッドが明確な位置を指定しているため、 どのトラックに収まるか分かります。 また、親の積み重ね軸をサブグリッド化しようとすると、 サブグリッドがメイソンリーレイアウトになり、 インライン軸で動作します。

サブグリッドが メイソンリーコンテナである場合、 サブメイソンリーと呼ぶことができます。

3.3. トラックの繰り返し: repeat()記法

この仕様はrepeat()記法に新しいキーワードと メイソンリー専用の動作を導入します。

3.3.1. repeat(auto-areas)

新しいauto-areas値は repeat()記法で、 明示的トラック数が該当軸のgrid-template-areas値と一致するために必要な繰り返し数を表します。 繰り返しに複数トラックが指定されている場合、 正しいトラック数にするため最終繰り返しは必要に応じて切り捨てられます。

注: auto-fitのように必ず1回以上完全に繰り返すのではなく、 auto-areasの繰り返し数は （すでに明示的トラックが十分ある場合）0にもなり得るし、最終繰り返しが部分的になることもあります。

grid-template-areasがnoneの場合、 この値はauto-fitと同様に動作します。

注: この値は通常のグリッドコンテナとメイソンリーコンテナの両方に適用されます。

この値が本当に必要かは不明です。 明示的グリッドはすでにgrid-auto-columns/grid-auto-rowsの値をテンプレートエリア数に合わせて使います。 [Issue #10854]

3.3.2. repeat(auto-fit)

メイソンリーコンテナ（通常のグリッドコンテナ同様）ではauto-fitはauto-fillのように動作しますが、 空トラックは折りたたみされます。 ただし、配置はトラックサイズ計算後なので、メイソンリーコンテナは トラックが占有されるかどうか判断するためヒューリスティックを使います:

• 明示的配置アイテムで占有されたトラックはすべて占有されたとみなす。

• 自動配置アイテムのスパン合計をNとした場合、 未占有トラックのうちN番目までのすべてを占有されたとみなす。

auto-fit繰り返しで生成され、このヒューリスティックで未占有とされたトラックは 「空」とみなし、折りたたみされます。 折りたたみトラックには自動配置アイテムは配置できません。

注: auto-fill使用時に 自動配置アイテムが空トラックに配置されることがあり、 auto-fit使用時なら折りたたみになるはずのトラックでも 1より大きいスパンの自動配置アイテムと隙間の小さい明示的配置アイテムが混在する場合に発生し得ます。

3.4. グリッド軸トラックのサイズ指定

トラックサイズ指定はCSS Gridと同様ですが、固有サイズに寄与するアイテムの扱いが異なります。

• そのトラックに明示的配置されたすべてのアイテムが寄与します。

• 自動グリッド位置を持つすべてのアイテムが寄与します （最終的にそのトラックに配置されるかどうかに関係なく）。

自動グリッド位置かつスパンするアイテムの場合、 すべての開始位置に配置されると仮定し、それぞれに応じて寄与します。

注: このアルゴリズムにより、各トラックは最終的に配置されるアイテムを十分に収容できるサイズとなり、 配置とトラックサイズ指定間で依存サイクルが発生しません。 ただしサイズのバリエーション次第で、必要以上に大きいトラックになる場合があります。 すべてのアイテムがグリッド軸に明示的配置されている場合や、全アイテムが同じサイズの場合のみ厳密なフィットが保証されます（スパンアイテムの場合はその倍数）。

3.4.1. サブグリッドアイテムの寄与

通常のグリッドコンテナや メイソンリーコンテナのトラックサイズ計算時、 サブメイソンリーは 自動グリッド位置アイテムの特別な扱いがあります:

• そのようなアイテムは、サブメイソンリーがスパンできるすべてのグリッドトラックに配置されます。 （サブメイソンリーが明示的グリッド位置なら該当トラックのみ、 自動グリッド位置なら親グリッドのすべてのトラック。）

• そのようなアイテムは、仮想的に置かれる各端の最大margin/border/paddingを寄与として受け取ります。 アイテムがサブグリッド全体をスパンする場合は両端とも受け取ります。 （CSS Grid Layout §9参照）

3.4.2. トラックサイズ指定の最適化

同じスパンサイズ・配置を持つアイテムをひとつの仮想アイテムに集約することで、トラックサイズ指定を最適化できます:

1. すべてのメイソンリーアイテムを次の特性でアイテムグループに分けます:

   • アイテムのスパン数

   • アイテムの配置（どのトラックに配置可能か）

   • アイテムのベースライン共有グループ

   注: 例えば、2スパンで2列目に配置されたアイテムは、2スパンで自動グリッド位置のアイテムとは別グループになります。

2. 各アイテムグループごとに、グループ内のアイテムの固有サイズ寄与の最大値を持つ仮想メイソンリーアイテムを合成します。

   アイテムがベースライン整列を使う場合、すべてのアイテムを1つの仮想グリッドトラックに配置し、共有ベースライン・shimを算出して、グループの固有サイズ寄与を増やします。

3. 各仮想メイソンリーアイテムの仮想コピーを、配置可能なすべてのグリッド軸トラックに配置し、 トラックサイズ指定アルゴリズムを実行します。 その結果がメイソンリーコンテナのトラックサイズです。

注: この最適化は上記トラックサイズ指定の説明と同じ結果になるはずです。 一致しない場合はCSSWGに報告してください。

4. メイソンリー配置

グリッド軸では、 アイテムはgrid-placementプロパティの構文で トラックに明示的配置でき、スパン指定も可能です。 自動配置は§ 4.4 メイソンリーレイアウトと配置アルゴリズムを使い、 自動グリッド位置のアイテムを現在「最も埋まっていない」メイソンリートラックに配置します。

こちらは配置+スパンアイテムのメイソンリーレイアウト例です:

より良い例が必要!!!

4.1. メイソンリーアイテム配置の指定: grid-column-* およびgrid-row-*プロパティ

grid-column-*およびgrid-row-*プロパティ （およびそのショートハンド）は アイテムのグリッド軸で適用され、 通常のグリッドレイアウト同様に配置されます。

4.2. 配置精度: item-toleranceプロパティ

メイソンリーコンテナは、 各メイソンリーアイテムを 現在最も埋まっていないメイソンリートラックに配置します。 複数トラックが同じ埋まり具合の場合は順番通り配置すると見た目が良いですが、 高さ差がごく僅かな場合、順番通りに埋めないと違和感が出ることがあります。 （高さ差が意味のある違いとして知覚されないため）

item-toleranceプロパティは「同じ高さ」とみなす閾値を指定し、 順番通りに埋めるきっかけとなります。

<length-percentage>

これはtie threshold（同点閾値）を指定し、 配置位置が最短位置から指定距離以内なら「同点」とみなします。

注: 初期値は「小さい距離」（1em）で、 「ほぼ同じ」とみなすのに適しているはずです。

normal

使用値として、メイソンリーレイアウトでは1em、他レイアウトモードでは0になります。

infinite

tie threshold（同点閾値）が無限大になります。 アイテムはトラック長さを一切考慮せず、厳密に順番通りに並びます。

注: この値だと連続するアイテムが積み重ね軸で極端に違う位置に配置されることもあり、読者に混乱を与える場合があります。 初期値（`1em`）が小さすぎる場合は、`infinite`ではなく`10em`や`50vh`など大きめの値を検討してください。

1emは適切なデフォルト値か？

CSSWGはこのプロパティのよりよい名前も募集中です。[Issue #10884]

注: このプロパティは将来的にフレックスレイアウトにも適用予定です。 詳しくは議論参照。

4.3. 密配置: denseキーワード

グリッドレイアウトでは、grid-auto-flow: denseによって グリッドアイテム配置アルゴリズムにおいて 逆戻り（backtracking）が可能です。 denseキーワードも同様に メイソンリー配置アルゴリズムで逆戻りを許可します。 ただしメイソンリー配置とサイズ指定は密接に関連しているため、 アイテムはそのスロットのトラック総使用サイズが通常配置トラックと一致する場合のみ 互換性のある空スロットへ逆戻りできます。

注: この制約によりアイテムのレイアウトが複数回行われるのを防げます。

4.4. メイソンリーレイアウトと配置アルゴリズム

グリッド軸の各トラックで、 running position（進行位置）をゼロで初期化して保持します。 また、auto-placement cursor（自動配置カーソル）も管理し、最初のラインを指します。

order-modified document orderの各アイテムについて:

1. アイテムが明示的グリッド位置をグリッド軸で持つ場合はその配置を使う。

   この場合カーソルも更新すべき？

   そうでなければ、次のサブステップでグリッド軸の配置を解決:

   1. 最初のグリッド軸ライン（暗黙グリッド）から、 その位置にアイテムを置いた時スパンするトラックの最大running positionを見つけ、それをmax_posとする。
   2. アイテムがグリッド内に収まる限り、前ステップを次のライン番号で繰り返す。
   3. 最小max_posとなるラインと、そのmax_posからtie threshold以内のラインをpossible linesとする。
   4. auto-placement cursor以上の最初のpossible linesをアイテムのグリッド軸位置とする。 なければ最初のものを使う。
   5. auto-placement cursorをアイテムの最終ラインに更新。
2. アイテムをそのグリッド軸トラックで、 スパンしたトラックのrunning positionの最大値に配置。
3. アイテムの包含ブロックサイズを計算してレイアウト。 スパンしたグリッド軸トラックのrunning positionを max_pos + outer size + grid-gapに設定。
4. メイソンリーコンテナがdense packingを使い、 レイアウト中にスキップされた空きスペース（例:スパンアイテムによる）があり、 現サイズでその時点で配置できた場合かつ、スパンしたトラックの総使用サイズが現在配置トラックと一致する場合は、 その中で最も高い空きスペースに配置。 tie threshold範囲内で複数あれば、最もstartなものに。 auto-placement cursorとrunning positionを配置前の値に戻す。

   注: 密配置ではbackfilling時にauto-placement cursorは無視され、配置後も更新されません。 適切な配置ギャップがなければ、denseなしと同じ挙動です。

注: このアルゴリズムはアイテムが可能な限り高く配置されるトラックを選びます。 同点がある場合は、可能なら直前のアイテムより後の最初のトラック（常に「前進」する）を選びます。

4.4.1. 包含ブロック

包含ブロックは、グリッドアイテムが メイソンリーレイアウトに参加する場合、 グリッドエリア（グリッド軸）と、 グリッドコンテナのcontent box（積み重ね軸）で形成されます。

4.4.2. 配置と書字モード

注: グリッドレイアウト同様、 メイソンリーレイアウト・配置も書字モードに依存します。 例えばdirection: rtlの場合、 アイテムは右から左に配置されます（グリッド軸・積み重ね軸どちらでも）。

こちらは 例 です。direction: rtl を グリッド軸で使用した簡単な例です：

<style>
  .grid {
    //FIXME display: inline something;
    direction: rtl;
    grid-template-columns: repeat(4, 2ch);
    border: 1px solid;
  }

  item { background: silver }
  item:nth-child(2n+1) {
    background: pink;
    height: 4em;
  }
  </style>

<div class="grid">
  <item>1</item>
  <item style="grid-column:span 2">2</item>
  <item>3</item>
  <item>4</item>
</div>

こちらは 例 です。direction: rtl を 積み重ね軸で使用した簡単な例です：

<style>
.grid {
  //FIXME display: inline something;
  direction: rtl;
  width: 10ch;
  column-gap: 1ch;
  grid-template-rows: repeat(4, 2em);
  border: 1px solid;
}

item { background: silver }
item:nth-child(2n+1) {
  background: pink;
  width: 4ch;
}
</style>

<div class="grid">
  <item>1</item>
  <item style="grid-row:span 2">2</item>
  <item>3</item>
  <item>4</item>
</div>

5. グリッドコンテナのサイズ指定

グリッドコンテナのサイズ指定は、通常のgrid containersと同様ですが、積み重ね軸について次の補足があります： グリッドコンテナの積み重ね軸におけるmax-contentサイズ（min-contentサイズ）は、 その軸でメイソンリーボックスをmax-content制約（min-content制約）でサイズ指定したときのサイズとなります。

シンプルな例です：

<style>
.grid {
  //FIXME display: inline something;
  grid-template-columns: 50px 100px auto;
  grid-gap: 10px;
  border: 1px solid;
}
item { background: silver; margin: 5px; }
</style>

<div class="grid">
  <item style="border:10px solid">1</item>
  <item>2</item>
  <item>3</item>
  <item style="height:50px">4</item>
  <item>5</item>
  <item>6</item>
</div>

6. 整列と間隔

ギャップは両軸でサポートされています。 積み重ね軸では、 隣接するアイテムのmargin box間にギャップが適用されます。 いずれの軸でもmarginは折り畳まれません。

グリッド軸では、整列は通常のグリッドコンテナと同様に機能します。

積み重ね軸では、content-distributionが ブロックコンテナの挙動と同様に、全体のコンテンツに適用されます。 より具体的には、整列対象はメイソンリーボックスであり、 これはすべてのmargin box（グリッドアイテム）を囲む最小の長方形です。

注: 整列対象は 積み重ね軸において常に一つのみなので、 align-content / justify-contentの値は start, center, end, およびベースライン整列となります。 （normalや stretchの動作はstartと同じです。 分散整列値はフォールバック整列として機能します。） グリッドアイテムが グリッドコンテナの content box （積み重ね軸）から溢れる場合、 メイソンリーボックスは グリッドコンテナのcontent boxより大きくなります。

積み重ね軸で整列はもっと高度なことをすべき？どうあるべき？

6.1. ベースライン整列

アイテムのベースライン整列は、グリッド軸トラック内では 通常のグリッドコンテナと同じく機能し、 グリッドコンテナのベースラインもその軸の通常のグリッドコンテナと同じく決定されます。

ベースライン整列は積み重ね軸ではサポートされません。 この軸のグリッドコンテナの 最初のベースラインセットは、各トラックで最初に配置された整列ベースラインの中で最も高いものから生成され、 最後のベースラインセットは各トラックで最後に配置された整列ベースラインの中で最も低いものから生成されます。

1行目でベースライン整列をサポートできるかも。望む？

最後のベースラインは最後に最も低く配置されたアイテムからにすべき？

7. 分割

7.1. 積み重ね軸での分割

各グリッド軸トラックは 積み重ね軸で独立して分割されます。 グリッドアイテムが分割された場合や、 その前後に強制改ページがある場合は、 そのアイテムがスパンするトラックのrunning positionは fragmentainerのサイズに設定され、 それ以降のアイテムはそのトラックに配置されません。 複数フラグメントに分割されたアイテムは、すべてのフラグメントでグリッド軸の配置を保持します。 ただしアイテムが押し出された場合は、次のグリッドコンテナフラグメントで再配置されます。 配置はすべてのアイテムが配置されるか新しいフラグメントに押し出されるまで継続します。

7.2. グリッド軸での分割

グリッド軸でメイソンリーレイアウトが他軸にある場合の分割もサポートされています。 この場合、分割は通常のグリッドコンテナに近い動作となります。 ただし、分割の前に各アイテムがどのグリッド軸トラックに配置されるかを決定するステップがあります。

8. 絶対配置

グリッド整列の絶対位置子孫は、 メイソンリーコンテナでも 通常のグリッドコンテナ同様にサポートされます。 ただし、積み重ね軸では （autoライン以外に）配置用のラインが2つのみ存在します：

• line 1（line -2）はメイソンリーボックスの開始端に対応します

• line 2（line -1）はメイソンリーボックスの終了端に対応します

積み重ね軸でstatic positionを定義できると便利かも。 その時点のグリッド軸トラックの最大（または最小？）running positionか、直前のアイテムの終端をstatic positionとできる？

9. グレースフルデグラデーション

通常、メイソンリーデザインはグリッドレイアウトをサポートするがメイソンリーレイアウトはサポートしないUAでも、かなり綺麗にデグレードされると期待できます。

display: grid;
display: something; /* メイソンリーレイアウト未対応UAでは無視される */
grid-template-columns: 150px 100px 50px;

付録A: 汎用レイアウトアイテムフロー制御: item-*プロパティ

このセクションは他の仕様（[css-display-4]等）に移動する可能性があります。複数display型に影響するため。

CSSの複数レイアウトモードは、子要素を原子的な「アイテム」としてコンテナ内の行・列に整理し、 順序や配置を設定できるようにしています。 item-*プロパティはこれらの順序・配置オプションを汎用的に制御し、 レイアウト固有のflex-flowやgrid-auto-flowプロパティを内包します。

CSSWGはこれらプロパティの命名や統合について検討中です。[Issue #11480]

アイテムフロー軸: item-track/item-direction

このプロパティはアイテムを行または列として配置するか、 そのトラック内で開始から終了、または終了から開始で並べるかを制御します。

このプロパティには2つの議論があります： a) 名前をどうするか b) 配置の主方向を記述するか、アイテムが配置されるトラックの向きを記述するか。 つまり、このプロパティで定義される主軸は 主配置軸なのか 主トラック軸なのか。 フレックスレイアウトやグリッドレイアウトでは同じですが、 メイソンリーレイアウトでは 主配置方向はトラックを横断します。[Issue #11480]

auto

レイアウトモードに応じてrowまたはcolumnとして算出されます：

• フレックスコンテナやグリッドコンテナではrowになります。

• メイソンリーコンテナでは、 grid-template-rowsがnoneでなく grid-template-columnsがnoneなら 行トラックを表す値に算出されます。それ以外は列トラックを表す値に算出されます。

row

トラック指向オプション 行（インライン軸に平行なトラックやライン）への配置を表します。 アイテムは開始から終了順に行を埋めます。

フロー指向オプション 行主配置（インライン軸で開始から終了に配置）を表し、 フレックスレイアウトではflex rowライン、 メイソンリーレイアウトではグリッド列トラックになります。

column

トラック指向オプション 列（ブロック軸に平行なトラックやライン）への配置を表します。 アイテムは開始から終了順に列を埋めます。

フロー指向オプション 列主配置（ブロック軸で開始から終了に配置）を表し、 フレックスレイアウトではflex columnライン、 メイソンリーレイアウトではグリッド行トラックになります。

row-reverse

rowと同じですが、終了から開始順に配置します。

column-reverse

columnと同じですが、終了から開始順に配置します。

アイテム交差軸配置モード: item-cross/item-wrap

主軸と反対の軸での配置を制御します。

auto

nowrapにフレックスコンテナでは算出され、 他ではwrapになります。

nowrap

アイテムは主配置軸にずっと配置されます。 スペースが足りなくなっても繰り返します。 フレックスレイアウトでは単一行フレックスコンテナとなり、 グリッドレイアウトでは主配置軸に必要に応じて暗黙トラックが作成されます。

wrap

主配置軸のスペースが足りなくなるとアイテムが折り返されます。 フレックスレイアウトでは複数行フレックスコンテナとなり、 グリッドレイアウトでは 主配置軸の明示的トラックが尽きると次の行/列に移動します。

normal

アイテムは主トラック軸と反対側の軸で開始から終了順に配置されます。

フレックスレイアウトやグリッドレイアウトでは 新しいトラック（flex行やグリッドトラック）がどちらの方向に配置されるかを制御します。

メイソンリーレイアウトでは、 トラック指向構文では高さが同じトラックが複数ある場合にどのトラックを選ぶかを制御し、 フロー指向構文ではアイテムがトラック内でどちらの方向に埋まるかを制御します。

reverse

アイテムは主トラック軸と反対側の軸で終了から開始順に配置されます。

wrap-reverse

wrap reverseに算出されます。

注: この値は既存のflex-wrap値との整合性のために存在します。

このプロパティの解釈と命名はitem-direction/item-trackの軸解釈に依存します。[Issue #11480]

アイテム配置パッキングモード: item-packプロパティ

このプロパティはアイテムのトラック分配方法をレイアウト固有に制御します。

normal

レイアウトモードのデフォルトパッキング戦略を使用します。

dense

前方でスキップされた空きスペースにアイテムを逆戻りで配置できます。 （前方アイテムが大きすぎたスペースが空いている場合など）

例えば、 フレックスレイアウトでは 十分な空きが残った前方行にもアイテムを配置できます。

balance

フレックスレイアウトでは 各行（最後の行も含む）のコンテンツ量をバランスします。 text-wrap-style: balanceに似ています。

メイソンリーレイアウトへ切り替えるため、collapse値をこのitem-packプロパティに追加する提案あり。[Issue #11243]

denseパッキングはメイソンリーにも適用すべき？ メイソンリーでは要素をすべての隙間に何度もレイアウトする必要があり、コストが高い。 グリッドは整数だけで済む。[Issue #9326]

アイテム配置ショートハンド: item-flowショートハンド

このショートハンドプロパティは、すべてのitem-*ロングハンドプロパティを一括指定します。

10. 謝辞

Cameron McCormack氏（メイソンリーレイアウト解説文書執筆、背景章より引用）、CSSWGへのプレゼンテーション、 Mats Palmgren氏（本仕様の最初のバージョン開発）に感謝します。 また、この機能の初期提案へのフィードバックをくださった皆様にも感謝します。

11. セキュリティに関する考慮事項

本仕様はレイアウト仕様であり、 CSSレイアウトが一般的にもたらすもの以外に新たなセキュリティ考慮事項はありません。

12. プライバシーに関する考慮事項

本仕様はレイアウト仕様であり、 CSSレイアウトが一般的にもたらすもの以外に新たなプライバシー考慮事項はありません。

変更点

レベル2以降の追加

レベル2以降で次の機能が追加されました：

• メイソンリーレイアウト追加
• item-flowプロパティとそのロングハンドを追加。アイテム順序・配置の汎用制御。 付録A: 汎用レイアウトアイテムフロー制御: item-*プロパティ参照。 （Issue 11480）

最近の変更

2024年10月3日作業草案以降の変更：

• メイソンリー専用のトラックテンプレート・配置プロパティを廃止。 (Issue 11243)

• item-flowおよびitem-*ロングハンド導入、 masonry-flowや関連プロパティを置換。 (Issue 11480)

• masonry-slackをitem-toleranceに改名、初期値をnormalに。 (Issue 10884, Issue 12111)

• メイソンリーレイアウト用display値のプレースホルダー追加。 (Issue 12022)

• 密配置をメイソンリーレイアウトに定義。 (Issue 9326)

• ベースライン整列を各トラックの最初/最後アイテムの最高/最低値をエクスポートするよう調整。 (Issue 9530)