| コンテナー |
|---|
| grid | inline-grid | 要素をgridコンテナーに変えます。 |
| 1fr 1fr | repeat(3, 1fr) | 200px 1fr | 列とその幅を定義します。 |
| auto 1fr auto | 行とその高さを定義します。 |
| [main-start] 1fr [main-end] | テンプレート内のグリッドラインに名前を付け、その名前でアイテムを配置します。 |
| 1rem | 8px 16px | 行と列の間の余白。 |
| "header header" "nav main" | セルに名前を付け、配置を読みやすくします。 |
| "head head" 64px "nav main" 1fr / 200px 1fr | 行、列、エリアを1つのショートハンドで設定します。 |
| repeat(2, 1fr) / auto-flow 80px | すべてのトラックプロパティとgrid-auto-flowを1つの宣言で設定します。 |
| minmax(80px, auto) | テンプレートで定義されない行の高さを設定します。 |
| 120px | minmax(0, 1fr) | テンプレートで定義されない列の幅を設定します。 |
| row | column | row dense | 未配置アイテムが流れる軸を選びます。denseは手前の隙間を埋め戻します。 |
| start | center | end | stretch | 各アイテムをセル内で行軸に沿って配置します。 |
| start | center | end | stretch | 各アイテムをセル内で列軸に沿って配置します。 |
| center | start end | align-itemsとjustify-itemsを1つの宣言で設定します。 |
| start | center | space-between | トラックのグリッド全体をコンテナー内で行軸に沿って配置します。 |
| start | center | space-between | トラックのグリッド全体をコンテナー内で列軸に沿って配置します。 |
| center | end start | align-contentとjustify-contentを1つの宣言で設定します。 |
| アイテム |
|---|
| 1 / 3 | span 2 | アイテムを列に沿って配置するか、複数列にまたがらせます。 |
| 1 / 2 | span 3 | アイテムを行に沿って配置するか、複数行にまたがらせます。 |
| grid-column: 2 / -1 | グリッドの終わりからラインを数えます。-1が最後のラインです。 |
| header | 1 / 1 / 2 / 3 | 1つのショートハンドでアイテムに名前を付けるか、完全に配置します。 |
| start | center | end | stretch | この1つのアイテムをセル内で行軸に沿って配置します。 |
| start | center | end | stretch | この1つのアイテムをセル内で列軸に沿って配置します。 |
| center | start end | align-selfとjustify-selfを1つの宣言で設定します。 |
| サイズ単位 |
|---|
| 1fr | 2fr | トラック内の余った空間に対する割合。 |
| auto | 1fr auto | トラックを内容に応じてサイズ決定します。配置で引き伸ばせます。 |
| min-content | max-content | トラックを最小内容または最大内容に合わせてサイズ決定します。 |
| fit-content(180px) | トラックを内容に応じてサイズ決定しますが、指定した上限は超えません。 |
| minmax(200px, 1fr) | トラックを最小値と最大値の間に制限します。 |
| repeat(4, 1fr) | トラックのパターンを1つずつ書かずに繰り返します。 |
| repeat(auto-fit, minmax(120px, 1fr)) | 収まるだけのトラックを追加します。auto-fitは空のトラックを折りたたみます。 |
| grid-template-columns: subgrid | ネストしたグリッドに親のトラックとライン名を共有させます。 |
| grid-template-rows: masonry | 実験的：固定行の代わりに、高さに応じてアイテムを列に詰め込みます。 |