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

grid-auto-flow プロパティ

 grid-auto-flow プロパティは、グリッドコンテナにおいて、子エレメント(グリッドアイテム)の並び順を横方向または縦方向に指定するプロパティです。
 グリッドコンテナとは、display:grid; が設定されたエレメントです。

 デフォルトのままではグリッドアイテムは横方向に並べていきますが、grid-auto-flow プロパティによって縦方向に並べることもできます。

 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値によって、グリッドコンテナ内に空きがでるような場合に自動で埋めることもできます。

関連する CSS プロパティ

 grid-auto-flow プロパティには、以下の関連するプロパティがあります。

display:grid;並びを設定することができるdisplayプロパティ
grid-areaグリッドアイテムに名称を指定
grid-auto-columnsグリッドアイテムの幅
grid-auto-flowグリッドコンテナの領域を自動的に拡張
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グリッドアイテムの行の並び数と高さ

ページ内 Index

構文(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値に設定してあります。グリッドアイテムが縦に並んでいることが分かります。