グリッドアイテムの自動で並ぶ方向変更

グリッドアイテムが自動的に並ぶときの並び方向を変更するには、grid-auto-flowプロパティを使用します。

  • ※ IE10、IE11は対応していません。

構文

							grid-auto-flow:方向;
						

指定値

設定値 説明
row 水平(Z字型)方向
column 垂直(逆N字型)方向
row dense 水平(Z字型)方向かつ空間を埋める
column dense 垂直(逆N字型)方向かつ空間を埋める

サンプルコード

row:

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

CSS

row dense:

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

CSS

column:

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

CSS

column dense:

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

CSS

CSS3逆引きリファレンス一覧へ戻る