レイアウト・構造
グリッドレイアウト
枠幅に応じて列数が自動で増減する等幅グリッド。grid-template-columns の repeat(auto-fill, minmax()) だけで、メディアクエリなしにレスポンシブする基本形。
プレビュー
静的
操作動きのない質感・レイアウトの見本です。
実装メモ
列数は 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"></span><span class="tile-cap">01</span></div>
<div class="tile" role="listitem"><span class="tile-thumb tile-b"></span><span class="tile-cap">02</span></div>
<div class="tile" role="listitem"><span class="tile-thumb tile-c"></span><span class="tile-cap">03</span></div>
<div class="tile" role="listitem"><span class="tile-thumb tile-d"></span><span class="tile-cap">04</span></div>
<div class="tile" role="listitem"><span class="tile-thumb tile-e"></span><span class="tile-cap">05</span></div>
<div class="tile" role="listitem"><span class="tile-thumb tile-f"></span><span class="tile-cap">06</span></div>
</div>
</div>