CSS Gridの自動配置で順序がずれるとき：denseとTab移動を比べる

幅の違うカードを並べ、空いたマスへ後ろのカードを詰めたら、画面では「1・3・2・4」の順になった。Tabキーでは「1・2・3・4」へ進むので、フォーカスが下へ移ってから上へ戻ります。隙間の少なさだけでは、この一覧を読みやすい配置とは判断できません。

HTMLのリスト・リンクとGridの列指定が分かる人向けに、架空の標本づくりの手順を使います。エディターとブラウザーで一枚のHTMLを開き、配置と操作を比べます。列数の基本はGridで一列と三列を切り替える記事を前提に、今回は読む順番を保つ条件へ絞ります。

三列の空きへ、後ろのカードが戻ってくる

一枚目と二枚目をそれぞれ二列分の幅にし、三枚目と四枚目を一列分にします。三列の箱では、一枚目の右に一列分だけ空きます。二枚目はそこへ収まらず、次の行へ進みます。

通常の行方向の自動配置では、その位置から後ろへ進んで置きます。grid-auto-flow: row denseでは、後続の小さな項目が前の空きへ戻って入り得ます。今回なら三枚目が一行目の右へ入り、視覚的な順序が変わります。MDNの自動配置の説明で、この空きの埋め方を確認できます。

図の同じ番号が二マスにあるのは、一枚が二列を使うという意味です。HTML内の項目を複製しているわけではありません。また、この比較ではorder、位置の個別指定、独自のtabindexは使いません。変える条件をdenseの有無に限定します。

四つの手順リンクを持つ見本を開く

次をgrid-order.htmlとして保存し、ブラウザーで開きます。最初は順序を保つrowです。画面を800px程度へ広げ、リンクの番号を左から右、上から下へ読んでください。48rem以上では三列になります。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>標本づくりの手順と配置</title>
<style>
* { box-sizing: border-box; }
body { margin: 16px; color: #222; font-family: sans-serif; line-height: 1.8; }
main { max-width: 800px; margin: auto; }
.steps { display: grid; grid-template-columns: minmax(0, 1fr);
  grid-auto-flow: row; gap: 16px; padding: 0; list-style: none; }
.steps > li { min-width: 0; }
.steps a { display: block; height: 100%; padding: 16px;
  border: 2px solid #555; color: #174ea6; background: #fff;
  overflow-wrap: anywhere; }
.steps a:focus-visible { outline: 4px solid #a63c00; outline-offset: 3px; }
@media (min-width: 48rem) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps > .wide { grid-column: span 2; }
}
</style>
</head>
<body><main>
<h1>標本づくりの準備</h1>
<p>架空の手順です。1から4へ進みます。</p>
<ol class="steps">
  <li class="wide"><a href="#step1">1 道具をそろえる</a></li>
  <li class="wide"><a href="#step2">2 台紙を切って名前を書く</a></li>
  <li><a href="#step3">3 標本を置く</a></li>
  <li><a href="#step4">4 仕上がりを点検する</a></li>
</ol>
<section id="step1"><h2>1 道具</h2><p>紙、鉛筆、はさみを用意します。</p></section>
<section id="step2"><h2>2 台紙</h2><p>台紙を切り、標本の名前を書きます。</p></section>
<section id="step3"><h2>3 配置</h2><p>標本を台紙の上に置きます。</p></section>
<section id="step4"><h2>4 点検</h2><p>名前と標本の対応を確かめます。</p></section>
</main></body>
</html>

先頭からTabで移り、枠の付く番号も1・2・3・4になるか記録します。次にrowをrow denseへ変えて保存し、再読み込みします。番号の位置は変わっても、Tabの順序は同じままです。OSによってはリンクをTab移動の対象にする設定が必要です。

リンク先には同じ番号の説明があります。Enterで到着する節も合わせて見ると、「どこに置かれているか」と「どの手順へ進むか」を別々に確認できます。枠自体が見えない場合は、フォーカス表示の点検を先に行います。

番号の飛びを、tabindexで補修しない

第一の失敗は、denseで上へ戻った3番に合わせ、正のtabindexでキーボードの順序も1・3・2・4へ変えることです。見た目とのずれは減っても、今度は手順の意味に合わなくなります。項目の追加や列数変更のたびに、別の順序まで管理することになります。

修正は、この番号付き手順ではdenseを外してrowへ戻すことです。追加したtabindexも取り除きます。Gridとアクセシビリティの説明が示すとおり、視覚的な配置だけでは文書の論理順序は変わりません。HTMLの並びを先に正しくし、それに沿う配置を選びます。

もし空きマスをなくす必要があるなら、二列分のカードをやめて全カードを一列分へそろえる案もあります。読み順を保つという条件を固定して、幅の強弱を残すかを選びます。修正後はTabだけでなく、Shift＋Tabでも4・3・2・1と戻れるかを確かめます。

一列なのに横へ広がったら、spanの適用範囲を見る

第二の失敗は、.wide { grid-column: span 2; }をメディアクエリーの外へ出すことです。一列にしたつもりでも、二列を必要とする項目が残り、暗黙の列が作られます。「一列の指定が効かない」と見えても、原因は子が使う列数です。

修正では、完成例のように二列をまたぐ指定を三列の条件内へ戻します。狭い幅にも別のwide指定が残っていれば削除するか、狭い条件でgrid-columnをautoへ戻します。overflowで隠して済ませると、リンクの一部が見えないままになります。

再確認は幅390pxで、四枚が一列に並び、右端の文字を読めることです。広げた後に再び狭める往復も試します。レスポンシブCSSの無料レッスンで扱う横はみ出しにも、親の幅だけでなく子の指定を確認する手順を使えます。

denseを使う前に、並べ替えてよい一覧か決める

順序が意味を持たない装飾画像の集まりなら、空きを詰める配置が候補になります。一方、手順、順位、時系列を示すものでは、前後関係を残す必要があります。商品や写真でもリンクを含むなら、Tabの移動が画面上で追いやすいかを別途確認します。

今回のrowだけで、あらゆるGridの順序問題が解決するわけではありません。既存CSSにorderやgrid-areaなどの個別配置があれば、それらも比較対象です。今回の見本で順序が合い、実ページで合わない場合は、その追加条件を調べます。

視覚順・Tab順・狭い幅を一枚の記録へ残す

10〜15分の確認では、以下の四条件を試します。時間は作業の目安です。最後は完成例のrowへ戻してください。

最後の行は追加課題の解答です。空きを減らす案を採るときも、何を変えた結果なのかを残します。画面の番号、操作した番号、到着した節の番号がそろえば、この手順一覧の配置を説明できます。