CSSのgrid-auto-flow:denseは空きを埋める前に内容の順序を確認する

grid-auto-flow: denseは、CSS Gridの中に残った空きを、後から来る小さいitemで埋めようとします。カードの高さや幅がそろわない一覧では、空いた場所が減って見えることがあります。しかし、そのために後ろにあるitemが先に表示されることがあります。日付順、手順、価格順、重要度順のように、読者が画面を上から追う順序に意味がある一覧へは、空きを埋めるためだけに使いません。

Gridには、指定した位置を持たないitemを空いた場所へ置く仕組みがあります。grid-auto-flowは、その自動配置を行方向に進めるか、列方向に進めるかを決めます。denseを加えると、前に残った空きを探し、後から来たitemで埋めます。空きが残ってもitemの順を前へ戻さない通常の配置とは、見た目の結果が違います。 W3CのCSS Grid仕様

denseは空きの処理を変え、内容の意味を判断しない

Gridの自動配置では、配置場所を指定していないitemがgrid containerの空いた場所へ入ります。初期の流れはrowで、最初の行を左から右へ探し、入らなければ次の行を作ります。columnなら、最初の列を上から下へ探し、入らなければ次の列を作ります。これは、itemをどちらの方向へ配置していくかの指定です。

denseは、空きを残さないようにする追加の指定です。たとえば、二列分の幅を取るitemが入りきらず、一列分だけの空きが残ったとします。そのあとに一列分のitemが来れば、denseは前の空きを使うことがあります。画面の上では、後から書いたitemが先に見える位置へ入ります。仕様は、この配置によってitemが順不同に見える可能性を示しています。

ここで大切なのは、denseが内容の優先順位を知っているわけではないことです。空きを埋められる寸法かどうかだけで場所を選びます。新着のお知らせ、公開日の順に並べる記事、申込みまでの手順、比較表の項目のように、前後関係を読ませる一覧では、見た目の空きを減らす利益より、順序を保つ利益を優先します。

たとえば、三列の事例一覧へ大きい写真のcardと小さいcardを混ぜる場合を考えます。大きいcardが二列分を使い、次の行の一列だけが空いたとき、一覧の末尾にある小さいcardがそこへ入ることがあります。写真の種類だけを眺めるgalleryなら、配置を採用する理由を検討できます。一方、公開順に読ませる施工例、更新順のお知らせ、段階順のサービス案内なら、画面の早い位置にあるcardを新しいものだと受け取る読者がいます。空きは残しても、順序は動かさない方がよいです。

先へ進む配置と空きを埋める配置を分ける

denseを付けない場合、自動配置は前へ進みます。大きいitemのために空きを飛ばしたときも、あとから戻ってその空きを埋めません。そのため、一覧には空いたgrid cellが残ることがあります。これはCSSが失敗した状態ではありません。内容の並びを保ちながら、各itemに必要な大きさを与えた結果です。

denseを付ける場合は、後から来るitemが前の空きへ入ることを受け入れます。二つの指定は、次のように使い分けます。

表の三つ目にも、内容がないとは限りません。作品や商品の画像を並べる場合でも、何を先に見せるか、どの画像へlinkを付けるか、画像の説明をどこへ置くかには意味があります。順番に意味を持たないと判断できるのは、並べ方を決める人だけです。制作者が空きの形だけを見てdenseを足すと、事業側が決めた掲載順を崩すおそれがあります。

一覧を作る人と内容を決める人が別なら、並び順を仕様として渡します。「cardを三列にする」だけでは足りません。公開日順なのか、選んだ順なのか、重要な案内を先に置くのか、画面上の空きを減らしてよいのかを書きます。CSSを担当する人は、指定された順番をHTMLで保ち、その順番と画面上の見え方が食い違わないかを確認します。作業を頼むことと、掲載順を決めることは別です。

大きさの違うcardを先に分けて見る

denseを試したくなる場面では、itemの幅や高さがそろっていないことが多いです。けれども、空きが生じる原因は一つではありません。cardによって画像の縦横比が違うのか、見出しの文字数が違うのか、特定のcardだけが二列分を使うのか、子要素のmarginが余計にあるのかを分けて見ます。原因を見ずにdenseだけを足すと、表示順の問題へ別の表示問題を重ねます。

説明用の仮例として、三列の一覧に通常幅のcardが六件あり、その中の一件だけを二列分に広げる場面を考えます。二列分のcardが入る場所を確保するために、前の行の一列が空くことがあります。ここへdenseを加えれば、後ろにある通常幅のcardが空きを埋めます。しかし、まず確かめるのは、その二列分のcardが本当に他より優先して広く見せる内容かどうかです。特集として先頭に置くなら、HTMLの順序とgridの位置を明示した方が、意図を読み取りやすくなります。

画像の高さが違うだけなら、Gridの配置を変えるより、画像枠の扱いをそろえる方法もあります。画像全体を見せるのか、枠を埋めるのか、切れる部分をどこにするのかは、object-fitとobject-positionの仕事です。画像枠の判断と一覧の順序を同じ指定で解決しようとしないでください。cardの内容を整理した結果として空きが残るなら、その空きが読者の行動を妨げるかを公開画面で確かめます。

採用するなら画面の順序を見て確認する

grid-auto-flow: denseを使うかは、stylesheetだけを見て決めません。実際のtitle、画像、本文量、linkを入れた状態で、広い画面と狭い画面を開きます。上から順にcardを読み、画面の左上にあるcardがHTMLで何番目に置かれているかを照合します。大きいcardの下や横にあるcardも見て、後ろの内容が不意に前へ出ていないかを確認します。

確認用の下書きでは、itemへ連番か短い仮の見出しを付けると分かりやすくなります。A、B、C、Dの順にHTMLへ置き、画面ではどの順に見えるかを比べます。denseを付けた結果だけでなく、外した結果も並べます。空きが減ることと、読者が内容を追いやすいことは同じではありません。

狭い画面で一列になる一覧も確認します。一列なら、複数列で生じた空きを埋める必要はなくなります。それでもdesktopの指定だけで掲載順を変えていると、広い画面と狭い画面で読者が受け取る順序が変わります。どちらの画面でも先に置くべき内容が同じなら、denseを使わない方が説明しやすい場合があります。CSSの指定を増やす前に、一覧が渡す順番を守れるかを基準にします。

空きが残ることを失敗にしない

一覧の空きは、見栄えだけを基準にすると直したくなります。しかし、siteの一覧は画像を並べるだけの場所ではありません。読者が記事の更新順を追う、サービスを比較する、手続きを上から進めるといった仕事を持ちます。空きを埋める指定で内容の順が動くなら、余白が残る方が情報の扱いとしては正確です。

最初の一手は、対象の一覧で「この順番を替えてよいか」を書くことです。替えてよい理由がなく、日付や手順の順に意味があるなら、grid-auto-flow: denseを付けません。順番に意味がなく、空きの形を整える理由があるなら、一つの下書きでdenseありとなしを比べます。表示を整える手段と、読者へ情報を渡す順序を分けて決めれば、CSSの都合で内容の優先順位を替えずに済みます。