モバイルでの商品グリットの列数3列で表示させる方法

日本語 ディスカッション 技術的なQ＆A

Topic summary

Dawn テーマバージョン9.0.0でモバイル表示時の商品グリッドを3列にする方法についての質問です。

解決方法:
フルバランスの渡邉氏が以下のCSSコード修正を提案:

  • @media screen and (max-width: 749px) 内の .grid--2-col-tablet-down .grid__item の width プロパティ値を 50%から33%に変更
  • 計算式: calc(33% - var(--grid-mobile-horizontal-spacing) / 2)

補足:

  • 100%の幅を分割する考え方で、4列にしたい場合は25%に設定
  • 質問者は解決策に満足し、ベストアンサーとして承認
Summarized with AI on November 21. AI used: claude-sonnet-4-5-20250929.
1

「Dawnのバージョン9.0.0」でモバイルでの商品グリットの列数3列で表示させるコード編集方法を教えていただきたいです。

2

0625さま

はじめまして、フルバランスの渡邉です。

ご質問を確認いたしました。

以下CSSの50%を33%に書き換えることで可能かと思います。

（100%の幅を何分割するかという考え方なので、４列にしたい場合は25%になります）

@media screen and (max-width: 749px)
.grid–2-col-tablet-down .grid__item {
width: calc(50% - var(–grid-mobile-horizontal-spacing) / 2);
}

参考になりましたら幸いです。

私たちの励みにもなりますので、
お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。

分からない点があれば、またいつでもご連絡ください。

フルバランス 渡邉