グリッド自動配置プロパティ

最終更新：2026-09-13

grid-auto-flow グリッド自動配置プロパティ

grid-auto-flow プロパティは、明示的に配置されていないグリッドアイテムが自動的に配置される方法を制御します。アイテムが行単位か列単位で埋まるか、およびレイアウトの隙間を埋める dense 詰めモードを有効にするかを決定します。このプロパティはグリッド全体の順序に直接影響します。

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

📝 構文

grid-auto-flow: row | column | row dense | column dense;

⚙️ 値

値	タイプ	説明
`row \| column \| row dense \| column dense`	キーワード	自動配置の方向と dense 詰め

▶ 例

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

▶ 試す

🌐 ブラウザーサポート

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

ヒント： row はグリッドを行単位で埋めます（デフォルト）。column は列単位で埋めます。

ヒント： dense キーワードは dense 詰めを有効にします。後から来る小さいアイテムが前の大きいアイテムが残した隙間を埋めるように移動しますが、視覚的な順序が変わることがあります。

❓ よくある質問

Qどのようなときに dense モードを使うべきですか？

Aアイテムのサイズがまちまちで自動配置に隙間が生じる場合に dense を使います。後から来る小さいアイテムが前の空洞を埋めるように移動し、スペースを最大化します。ただし dense は視覚的な順序を DOM 順からずらし、スクリーンリーダーやキーボードナビゲーションは DOM 順のままなので、読み順が飛び跳ねることがあります。アクセシビリティに敏感な場面では注意が必要です。

Qgrid-auto-flow: column はどのような見た目ですか？

Aアイテムはまず最初の列を上から下へ埋め、次に次の列へ移り、デフォルトの行優先の埋め込みと垂直な方向に流れます。column では、追加のアイテムは下ではなく右側に暗黙の列を作成します。これは横向きに並べたリストに求める向きです。縦書きの読み流し、タイムライン、関連カードの列など、列指向のコンテンツに向いています。grid-auto-flow: column dense と書くと、列単位の埋め込みで dense 詰めも有効になります。

QCSS Grid で masonry（モザイク）レイアウトを実現するにはどうすればよいですか？

A一般的な方法は grid-auto-flow: row dense と、高さの異なるカードに grid-row: span 2 や span 3 を指定し、grid-auto-rows で行高を統一する組み合わせです。dense が空洞を埋めます。ただし dense は視覚/DOM 順を乱し、アクセシビリティに影響します。なお、ネイティブな grid masonry の実装はまだ実験的で一部のエンジンではフラグ付きです。そのため本番サイトでは、順序とブラウザ対応を重視する場合 column-count がより移植性の高い代替手段となります。