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

grid_auto_flow

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

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

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

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

1
2
3
4
5
 display: grid ;
 grid-template-columns: repeat(3, 100px) ;
 grid-template-rows: repeat(3, 100px) ;
}
div:first-child{
 grid-column: 1 / 3 ; /* 2枠使用 */
 background: rgba(250,0,100,.8) ;
}
div:nth-child(2){
 grid-column: 2 / 4;  /* 2枠使用 */
 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の4種類。
row dense は"dense"を指定した場合と同じなので省略。

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

grid-auto-flow: row ;

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

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

1
2
3
4
5

grid-auto-flow: column ;

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

1
2
3
4
5

grid-auto-flow: dense ;

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

1
2
3
4
5

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

grid-auto-flow: column dense ;

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

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

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

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

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

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

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

1
2
3
4
5

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

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

1
2
3
4
5

Gridレイアウトに関する記事

23:40まで受講できるから、仕事と両立できるHTML5/CSS3コース[オンライン]

2020年4月21日HTML/CSScss,display_grid

Posted by ミフネWEB