CSSグリッド-自動フロープロパティ

自動配置されたアイテムを列ごとに挿入します。

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

定義と使用法

このgrid-auto-flowプロパティは、自動配置されたアイテムをグリッドに挿入する方法を制御します。

デフォルト値：	行
遺伝性の：	いいえ
アニメート可能：	はい。アニメート可能について読む
バージョン：	CSSグリッドレイアウトモジュールレベル1
JavaScript構文：	object .style.gridAutoFlow = "rowdensity"

表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。

Property
grid-auto-flow	57	16	52	10	44

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

Value	Description	Play it
row	Default value. Places items by filling each row
column	Places items by filling each column
dense	Place items to fill any holes in the grid
row dense	Places items by filling each row, and fill any holes in the grid
column dense	Places items by filling each column, and fill any holes in the grid

「密な」値を追加して、グリッドの穴を埋めます。

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