▦ グリッドテンプレート (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' } |
例
Loading Preview…