暗黙の行トラックプロパティ

最終更新：2026-09-13

grid-auto-rows 暗黙の行トラックプロパティ

grid-auto-rows プロパティは、グリッドコンテナ内で暗黙的に作成される行トラックの高さを制御します。grid-template-rows が定義していない行にグリッドアイテムが配置されると、ブラウザは自動的に暗黙の行を作成します。このプロパティはその自動作成された行のサイズを設定します。明示的に定義されていない行も一貫した高さを持つようにします。

カテゴリ
初期値	auto
継承	いいえ
適用対象
アニメーションタイプ
CSS バージョン	CSS3
状態	標準

📝 構文

grid-auto-rows: <track-size>;

⚙️ 値

値	タイプ	説明
`auto`	キーワード	自動的に計算される
`<length> \| <percentage>`	タイプ	固定の暗黙行高

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
grid-auto-rows	✓ v57	✓ v16	✓ v52	✓ v10.1	✓ v44
すべての主要ブラウザーでサポート

ヒント： grid-auto-rows: auto にすると、暗黙の行の高さは完全にコンテンツ主導になり、行高が不揃いになることがあります。

ヒント： minmax(80px, auto) は、最小高さを保証しつつ、コンテンツの多い行を自動的に伸ばします。

❓ よくある質問

Qgrid-auto-rows のデフォルト値は何ですか？

Aデフォルトは auto です。暗黙の行の高さは、その行内で最も高いアイテムのコンテンツによって決まります。そのため、grid-auto-rows を指定しないと、複数行グリッドの行高はコンテンツに応じて変化します。暗黙の行は grid-template-rows で定義された明示的行の外に配置されたアイテムに対してのみ存在することに注意してください。明示的に宣言した行はそのプロパティでサイズが決まり、それ以外の行は grid-auto-rows にフォールバックします。行を統一するには、grid-auto-rows: 100px または minmax(100px, auto) を明示的に設定してデフォルトの動作を上書きします。

Qすべての行を同じ高さにするにはどうすればよいですか？

Agrid-auto-rows: 1fr または 100px のような固定高さを設定すると、暗黙の行が明示的行と一致します。1fr はコンテナに合わせて伸縮する行に向いていますが、コンテナに明確な高さがある場合にのみ意味があります。そうでないと行はコンテンツサイズに折りたたまれます。固定値は整った均一な見た目が必要なカードリストに向いています。行数が固定されて構造が明確な場合は、すべての行を grid-template-rows で定義する方がすっきりします。

Qgrid-auto-rows: minmax(100px, auto) は何を意味しますか？

Aminmax は行高の範囲を定義します。最小 100px、最大 auto（コンテンツに合わせて伸長）です。つまり各行は最低 100px の高さがあり、コンテンツが高いときは自動的に伸び、内容を切り取ることはありません。固定高さと比べると minmax(100px, auto) はカードを整然に保ちつつコンテンツも安全です。純粋な auto と比べると、コンテンツが少ないときに行が短くなりすぎて見た目が疎らになるのを防ぎます。