グリッドのトラック
等分の Grid トラックとトラックをまたぐ配置を、1 つのクラスで指定します。
このページの内容
クラス
| クラス | 宣言 |
|---|---|
grid-cols(<integer>) | display: grid;grid-template-columns: repeat(<integer>, minmax(0, 1fr)); |
grid-rows(<integer>) | display: grid;grid-auto-flow: column;grid-template-rows: repeat(<integer>, minmax(0, 1fr)); |
grid-col-span(<integer>) | grid-column: span <integer>/span <integer>; |
grid-row-span(<integer>) | grid-row: span <integer>/span <integer>; |
grid-cols() と grid-rows() は Grid を作成します。span 関数は、既存の Grid 内で項目を配置します。
トラック数と項目の配置は別の要素が指定する
grid-cols(3) は display: grid と 3 本の minmax(0, 1fr) 列を設定します。grid-rows(3) は同じ指定の行を 3 本作り、さらに grid-auto-flow: column を設定します。そのほかが既定の配置なら、同じ 6 個の子要素が、前者では横方向に、後者では下方向に埋まります。
列と行の組み合わせスタイルは同じ子要素を異なる方向に並べる
両方の Grid は、同じ 6 個の子要素と gap を使います。grid-rows(3) はさらに grid-auto-flow: column を設定し、grid-cols(3) は既定の行方向のフローを保ちます。タイルの高さは内容に従います。
テキストによる説明
- 最初の Grid には明示的な minmax(0, 1fr) の列が 3 本あります。既定の行方向のフローで、項目 1、2、3 が最初の行に横に並び、その後に 4、5、6 が続きます。
- 2 番目の Grid には明示的な minmax(0, 1fr) の行が 3 本あり、列方向に自動配置します。項目 1、2、3 が最初の列を埋め、4、5、6 が 2 番目の列に入ります。
- 両方の場面は、実際のプリセット CSS、内容に応じた同じサイズのタイル 6 個、12px の gap を使います。幅はタイル同士を比較しやすくするための指定で、どちらの組み合わせスタイルも gap や幅自体は設定しません。
- 図では既定の項目配置を使います。明示的な配置や span によって結果は変わり得ます。grid-cols は、ほかで設定した列方向のフローをリセットしません。
トラック数と span には正の整数を使います。トラック関数は gap を追加しません。等しい比率で分割されるのは gap を差し引いた利用可能な空間です。最小値をゼロにするとトラックは縮められますが、それ自体で内容が折り返されたり切り取られたりするわけではありません。
grid-col-span(2) と grid-row-span(2) は項目の配置を指定するもので、親要素の display は設定しません。span が明示的な Grid を超えると、暗黙のトラックが作られることがあります。ブレークポイントに応じてトラック数と span を調整する方法は、レイアウトガイドで説明しています。
grid-cols() は、grid-rows() が設定した列方向のフローをリセットしません。両方が適用されると、どちらのトラック定義も残り、自動配置は引き続き列を下方向に進みます。行方向のフローが必要なら、明示的に (grid-auto-flow:row) を追加します。
行の比率で固定の縦方向の空間を分割するには、利用可能な高さが制約されている必要があります。高さが auto の Grid では内容も行サイズの計算に関わります。grid-rows(3) は高さを制限する指定ではありません。
関連項目： レイアウト、ネイティブの Grid 配置.
使用例
等幅の列を 3 本作り、メインの項目を 2 列・2 行にまたがって配置します。
<div class="… grid-cols(3) gap-xs"> <div class="… grid-col-span(2) grid-row-span(2)">Feature</div> <div>Notes</div> <div>Drafts</div> <div>Archive</div> <div>Shared</div> <div>Trash</div></div>生成された CSS
@layer theme { :root, :host { --spacing-xs: .5rem }}@layer utilities { .grid-cols\(3\) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) } .gap-xs { gap: var(--spacing-xs) } .grid-col-span\(2\) { grid-column: span 2/span 2 } .grid-row-span\(2\) { grid-row: span 2/span 2 }}カスタマイズ
プリセットはこれらのクラスを @utility で定義しています。スタイルシートで同じ名前を定義すると、元の定義を置き換えられます。
@utility grid-cols(--n <integer>) { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr));}@utility grid-rows(--n <integer>) { display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--n), minmax(0, 1fr));}@utility grid-col-span(--n <integer>) { grid-column: span var(--n)/span var(--n);}@utility grid-row-span(--n <integer>) { grid-row: span var(--n)/span var(--n);}関連項目： ユーティリティの定義、レイアウト.