備忘録的プログラミングリファレンス

grid-auto-flowプロパティ

 grid-auto-flowプロパティは、display:grid;において、子エレメント(グリッドアイテム)並び順を行方向にするのか列方向にするのを指定するプロパティです。

 デフォルトのままではグリッドアイテムは行方向に並べていきますが、列方向に並べることができます。

 grid-auto-flowプロパティは、grid-templategrid-template-columnsgrid-template-rowsプロパティによって行列状にグリッドアイテムを並べる場合に有効です。

グリッドアイテムを列方向に並べる(Exampleを参照
display: grid;
grid-template: 50px 50px 50px / 33% 33% 33%;
grid-auto-flow: column;

 dense値によって、グリッドコンテナ内に空きがでるような場合に自動で埋めることもできます。

関連するプロパティ

 以下は関連するプロパティです。

display:grid;並びを設定することができるdisplayプロパティ
grid-areaグリッドアイテムに名称を指定
grid-auto-columnsグリッドアイテムの幅
grid-auto-rows全てのグリッドアイテムの高さ
grid-columnグリッドアイテムの列単位の位置と連結数
grid-column-end列単位の位置や連結数
grid-column-gap列同士のギャップ幅
grid-column-start列単位(横)の位置や連結数
grid-gapグリッドアイテムどうしのギャップのサイズ
grid-row行単位の位置と連結数
grid-row-end行単位の位置や連結数
grid-row-gap行同士のギャップ幅
grid-row-start行単位の位置や連結
grid-templateグリッドアイテムの並び数やサイズ
grid-template-areasグリッドアイテムの配置や連結
grid-template-columnsグリッドアイテムの列の並び数、幅
grid-template-rowsグリッドアイテムの行の並び数と高さ

構文(Syntax)

CSS

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

DOM(JavaScript)

値の取得
String = object.style.gridAutoFlow;
値の設定
object.style.gridAutoFlow=" row | column | dense | row dense | column dense ";

値(Values)

Value摘要
row初期値(default値)、行方向に拡張
column列方向に拡張
dense空きスペースを埋めるように自動配置
row dense行方向の空きスペースを埋めるように自動配置
column dense列方向の空きスペースを埋めるように自動配置

備考(Remarks)

初期値(Default value)row
継承(Inherited)No
CSS AnimationYes

Example

グリッドアイテムの並びと大きさを指定

 grid-auto-flowの例です。 column値に設定してあります。グリッドアイテムが縦に並んでいることが分かります。