グリッドレイアウト (Grid)
Taffy の Grid API は CSS Grid に似ており、2次元レイアウトに最適です。行と列のトラックを定義し、線または領域でアイテムを配置します。
基本概念
- トラック（Track）：行または列のサイジング定義
- ライン（Line）：配置に使用されるグリッド線
- エリア（Area）：名前付き領域（使用する場合）
列: 1fr 2fr 行: auto 1fr ┌───────────────┐ │ Header │ ├───────┬───────┤ │ Nav │ Main │ └───────┴───────┘
最小限の例
Loading Preview…
名前付き領域とテンプレートのサイズ
gridTemplateAreas は名前付き領域の配列です。rowStart / columnStart は 1 始まりで、rowEnd / columnEnd は領域に含まれない終端のグリッド線です。配列だけを設定した場合、各領域の最大終端位置からテンプレートの行列数を推定します。
const style = new Style({ display: Display.Grid, gridTemplateAreas: [ { name: "main", rowStart: 1, rowEnd: 2, columnStart: 1, columnEnd: 2 }, ], gridTemplateAreaRowCount: 2, gridTemplateAreaColumnCount: 3, });
このテンプレートは 2 行 3 列で、名前のないセルは CSS の . に相当します。明示的な行列数は最小値であり、読み取った実効サイズは現在の名前付き領域より小さくなりません。配列を置換または空にすると領域の範囲を再計算し、2 つの count プロパティで明示的に指定した最小値だけを保持します。count を 0 にすると、その軸の明示的な最小値を解除します。getStyle()、setStyle()、測定コールバックのスタイルコピーでもこの区別を保持します。