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

**URL:** <https://community.shopify.com/t/topic/209270>\
**Category:** 技術的なQ＆A\
**Created:** [April 18, 2023, 11:06am UTC](https://community.shopify.com/t/topic/209270 "2023-04-18T11:06:30Z")\
**Posts on this page:** 2\
**Page:** 1

## AI-generated 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%に設定
- 質問者は解決策に満足し、ベストアンサーとして承認

<div class="post-metadata">

**Author:** ![0625](https://avatars.discourse-cdn.com/v4/letter/0/258eb7/32.png) [@0625](https://community.shopify.com/u/0625)\
**Post date:** [April 18, 2023, 11:06am UTC](https://community.shopify.com/t/topic/209270/1 "2023-04-18T11:06:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/anonymous_44fbe07fc59d9ccaacd70575fd5a5155/32/194200_2.png) [@Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://community.shopify.com/u/Anonymous_44fbe07fc59d9ccaacd70575fd5a5155)\
**Post date:** [April 20, 2023, 9:16am UTC](https://community.shopify.com/t/topic/209270/2 "2023-04-20T09:16:14Z")

</div>

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ボタンを押して頂ければ嬉しいです。

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

フルバランス 渡邉