grid-auto-flowで配置方法を指定する【gridレイアウト】

gridレイアウトでは基本的に、grid-template-columns・grid-template-rowsで指定したグリッド枠に沿って左詰めで順番にグリッドアイテムが振り分けられます。

これは、grid-auto-flowプロパティの初期値がrow であるためです。

grid-auto-flowプロパティは、gridアイテムの配置方法を指定します。

今回は説明用に、下のようなサンプルを使います。

div{
 display: grid ;
 grid-template-columns: repeat(3, 100px) ;
 grid-template-rows: repeat(3, 100px) ;
}

div:first-child{
 grid-column: 1 / 3 ;　/* ２枠使用 */
 background: rgba(250,0,100,.8) ;
}

div:nth-child(2){
 grid-column: 2 / 4; 　/* ２枠使用 */
 background: rgba(255,255,0,.8) ;
}

div:nth-child(3){
 background: rgba(0,255,0,.8) ;
}

div:nth-child(4){
 background: rgba(0,0,255,.8) ;
}

div:nth-child(5){
 background: rgba(255,0,0,.8) ;
}

grid-auto-flowプロパティ

grid-auto-flowプロパティは、グリッドアイテムがどのように配置されるかを指定します。

指定できる値はrow、 column 、dense 、column denseの４種類。
row dense　は”dense”を指定した場合と同じなので省略。

row	アイテムを横方向に配置
column	アイテムを縦方向に配置
dense	横方向に隙間を埋めながら配置
column dense	縦方向に隙間を埋めながら配置

grid-auto-flow: row ;

最初に出したサンプルは初期値（row）なので、左上から順番に横方向のレイアウトとなります。

１番と２番は２枠使用するため、隣の枠が空白となります。

grid-auto-flow: column ;

column を指定すると左上から縦方向に配置されます。
２番の隣が空白だったので３番がそこに配置されました。

grid-auto-flow: dense ;

denseは「密集」という意味ですが、dense を指定すると可能な限り隙間を埋めながら横方向に配置されます。

サンプルのように、隙間を埋めることでアイテムの順番が入れ替わることもあります。

grid-auto-flow: column dense ;

“column dense” は隙間を埋めながら縦方向に進みますが、ほとんどの場合columnと同じレイアウトになるのであまり気にしなくて良いです。
今回についても、columnと同じレイアウトになるので例示は省略します。

余談 grid-column で例外的な動きをするケース

ほとんど起こらない事例だと思いますが、一度引っかかったことがあるので一応書いておきます。

grid-column プロパティで位置を指定するとき、

＃{
 grid-column: auto /span 2 ;
}

のように、autoを使って、開始位置を決めずに使用する枠数だけ指定する書き方があります。

仮にサンプルの１番（grid-column: 1 / 3 ;）をこの指定にすると、grid-auto-flow: columnにしたとき２行目に配置され、２番のアイテムが１行目に来ます。

はっきりとした説明は見つけられませんでしたが、grid-auto-flow: columnでは、grid-columnプロパティで開始位置を明確に指定しているアイテムを優先して配置されます。これはdense の有無に関わらず起こります。

たとえば4番（指定なし）に”grid-column: 1 / 2; “　を指定すると以下の通り。