グリッドレイアウト
枠幅に応じて列数が自動で増減する等幅グリッド。grid-template-columns の repeat(auto-fill, minmax()) だけで、メディアクエリなしにレスポンシブする基本形。
プレビュー
静的
操作動きのない質感・レイアウトの見本です。
仕様書
- 向く場面
- 商品・作品などの等幅タイル一覧
- メディアクエリ無しで列数を増減させたい格子
- 1 トラックの最小幅で密度を決めたいとき
- 避ける場面
- 高さの違うカードを隙間なく積みたいとき（メイソンリーへ）
- 行ごとに主役の大きさを変えたいとき（ベントへ）
- 構成要素
- ステージ
- グリッド
- タイル
- サムネイル
- キャプション
- 持っている状態
- 通常
- キーボード
操作要素なし（静的な配置）。中に置くリンクやボタン側で通常のフォーカス移動を確保する
- 支援技術
role=list／listitem で件数と順序が読まれる。サムネイルは aria-hidden で読み上げ対象外、キャプションの番号だけが読まれる
- 動き
なし
デザインの要点
- 列数は minmax(90px, 1fr) の最小幅だけで決まる。ブレークポイントを書かないので、置かれる枠の幅が変わっても崩れない
- gap は 10px で固定。列数が増減しても余白が同じなら、一覧として同じリズムで読める
- タイルの高さは揃えようとしない。サムネ 52px＋番号だけの構造にしておけば、どの列数でも高さが自然に一致する
実装メモ
列数は minmax(90px, 1fr) の最小幅で決まります。1トラック当たりの最小幅を変えれば、メディアクエリを書かずに列数の折返し密度を調整できます。
コード（コピーして使えます）
<div class="stage">
<div class="grid" role="list" aria-label="商品グリッド">
<div class="tile" role="listitem"><span class="tile-thumb tile-a" aria-hidden="true"></span><span class="tile-cap">01</span></div>
<div class="tile" role="listitem"><span class="tile-thumb tile-b" aria-hidden="true"></span><span class="tile-cap">02</span></div>
<div class="tile" role="listitem"><span class="tile-thumb tile-c" aria-hidden="true"></span><span class="tile-cap">03</span></div>
<div class="tile" role="listitem"><span class="tile-thumb tile-d" aria-hidden="true"></span><span class="tile-cap">04</span></div>
<div class="tile" role="listitem"><span class="tile-thumb tile-e" aria-hidden="true"></span><span class="tile-cap">05</span></div>
<div class="tile" role="listitem"><span class="tile-thumb tile-f" aria-hidden="true"></span><span class="tile-cap">06</span></div>
</div>
</div>