▦ グリッドテンプレート (Grid Template)
グリッドの行と列を定義します。
gridTemplateColumns と gridTemplateRows プロパティは、グリッドのトラックサイズ関数を定義します。
トラックサイズ
各トラックは min と max のサイズ関数を使って定義します：
| 値 | 説明 | 例 (JS) |
|---|---|---|
| Points（ポイント） | ピクセル単位の固定サイズ。 | { min: 100, max: 100 } |
| Percent（パーセント） | コンテナサイズの割合。 | { min: 0, max: '50%' } |
| Flex (fr)（フレックス） | 残りスペースのシェア（分数単位）。 | { min: 0, max: '1fr' } |
| Auto（自動） | コンテンツと利用可能なスペースに基づくサイズ。 | { min: 'auto', max: 'auto' } |
| MinContent（最小コンテンツ） | コンテンツに適合する最小のサイズ。 | { min: 'min-content', max: 'auto' } |
| MaxContent（最大コンテンツ） | コンテンツに適合する最大のサイズ。 | { min: 'auto', max: 'max-content' } |
min と max のパーセント値は "50%" のような文字列で指定し、対応するコンテナ寸法の半分を表します。数値は固定長で、0.5 は 0.5 ピクセルです。gridAutoRows、gridAutoColumns、repeat の tracks 配列にも同じ規則が適用されます。
例
Loading Preview…