CSS grid-auto-flow 属性

定義と使用方法

grid-auto-flow 属性は、自動的に配置されるプロジェクトがグリッドにどのように挿入されるかを制御します。

また、参照してください：

CSS チュートリアル：CSS グリッドレイアウト

例

例 1

自動的に配置されるプロジェクトを列ごとに挿入します：

.grid-container {
  display: grid;
  grid-auto-flow: column;
}

自分で試してみてください

例 2

「dense」値を追加してグリッド内のすべての穴を埋めます：

.grid-container {
  display: grid;
  grid-auto-flow: row dense;
}

自分で試してみてください

CSS 文法

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

属性値

値 説明
row デフォルト値。各行を埋めることでアイテムを配置します。
column 各列を埋めることでアイテムを配置します。
dense グリッド内のすべての穴を埋めるためにアイテムを配置します。
row dense 各行を埋めることでアイテムを配置し、グリッド内のすべての穴を埋めます。
column dense 各列を埋めることでアイテムを配置し、グリッド内のすべての穴を埋めます。

技術的詳細

デフォルト値： row
継承： いいえ
アニメーション作成： サポート。参照してください：アニメーション関連属性。
バージョン： CSS Grid Layout Module Level 1
JavaScript 文法： object.style.gridAutoFlow="row dense"

ブラウザのサポート

テーブルの数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44