カタロググリッドレイアウトとは?
商品一覧ページのグリッド列数は、画面サイズと商品数に応じて変える必要があります。列が多すぎるとモバイルで商品情報が潰れ、少なすぎるとデスクトップ画面がスカスカに見えます。この計算機は商品数と表示デバイスを入力すると、バランスの取れた列・行構成を提案します。
デバイス別の基本列数
モバイルは2列、タブレットは商品が多い場合4列まで、デスクトップは商品数に応じて4〜6列まで拡張する方式を基本値としています。商品数が推奨列数より少ない場合は、空白セルが出ないよう商品数に合わせて列数を自動的に減らします。
実務での活用方法
計算された列数はCSS Gridのgrid-template-columns: repeat(N, 1fr)にそのまま使えます。カード幅の比率は画像のアスペクト比を決める際の参考になり、レイアウトが崩れにくくなります。商品数が頻繁に変わるカテゴリページでは、レスポンシブのブレークポイントごとにこの基準を適用するのがおすすめです。
よくある質問
モバイルではグリッドを何列にすべきですか?
モバイル画面では2列構成が最も無難です。商品画像と情報が小さくなりすぎず、一画面に複数の商品を表示できます。
商品数が列数より少ない場合はどうなりますか?
商品数が推奨列数より少ない場合は、空白セルが出ないよう商品数に合わせて列数を自動的に減らして計算します。