レイアウト

grid-auto-flow

grid-auto-flow は、置く場所を決めていないグリッドの項目を、行に沿って並べるか列に沿って並べるかと、前に空いたマスを詰めるかを指定します。

構文

[ row | column ] || dense

1234

プリセット

見本

項目

右下の角をドラッグするとサイズを変えられます

.box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-auto-flow: row dense;
}

grid-auto-flowrow dense

rowcolumn

dense（前に空いたマスを埋める）

1234

row：初期値です。項目を 1 行目の左から右へ置き、行が埋まったら次の行へ進みます。行が足りなければ、下に行を足します。
column：項目を 1 列目の上から下へ置き、列が埋まったら次の列へ進みます。列が足りなければ、右に列を足します。
dense：row か column のあとに付けて（row dense）、前に空いたマスに、あとの項目を入れて詰めます。dense だけなら row dense と同じです。

初期値では、項目は書いた順に、前の項目より後ろの空いているマスに入ります。2 列にまたがる項目が行の終わりに入りきらないと次の行へ回り、残ったマスは空いたままになります。dense にすると、置くたびに先頭から空きを探すので、あとの小さな項目が前の空きを埋めます。

このページのプレビューは、補助の宣言で 3 列 3 行のグリッドにしています。項目の 1 と 2 は 2 列にまたがる（grid-column: span 2）ので、row では 1 行目の右のマスが空き、row dense では 3 がそこに入ります。

dense は見た目の順番を HTML の順番と変えてしまうので、キーボードで移動する順番や読み上げの順番と、見た目の順番がずれます。写真の一覧のような、順番に意味のない項目に使います。

column では、grid-template-rows で行の数を決めておかないと、すべての項目が 1 行に並びます。足された列の幅は grid-auto-columns（初期値は auto）で決まります。

grid ショートハンドでは、auto-flow というキーワードで書きます（grid: auto-flow dense / 1fr 1fr）。スラッシュの前に書くと row、後ろに書くと column です。