# テーマ：Dawn　コレクションリストのモバイル表記列追加

**URL:** <https://community.shopify.com/t/dawn/378106>\
**Category:** 技術的なQ＆A\
**Created:** [December 2, 2024, 4:58am UTC](https://community.shopify.com/t/dawn/378106 "2024-12-02T04:58:23Z")\
**Posts on this page:** 3\
**Page:** 1

## AI-generated summary

Dawnテーマ（バージョン15.1.0）のモバイル表示において、コレクションリストの列数を標準の2列から3列または4列に増やす方法についての質問と解決。

**質問内容：**
- モバイルでコレクションリストを3列・4列表示にするためのコーディング方法
- 過去バージョンの回答が現バージョンで見つからない

**解決方法：**
- コレクションリストのカスタムCSS欄にメディアクエリを追加
- Dawn 15.2.0を基に回答（15.1.0と互換性あり）
- 3列表示：`width: calc(33% - var(--grid-mobile-horizontal-spacing) / 2)` と `max-width: calc(33.3%)` を設定
- 4列表示：同様に25%の幅で設定
- `@media screen and (max-width: 749px)` でモバイル画面に適用

**結果：**
問題は無事解決し、質問者はベストソリューションとして承認。スクリーンショット画像も添付されている。

<div class="post-metadata">

**Author:** ![FEI](https://avatars.discourse-cdn.com/v4/letter/f/59ef9b/32.png) [@FEI](https://community.shopify.com/u/FEI)\
**Post date:** [December 2, 2024, 4:58am UTC](https://community.shopify.com/t/dawn/378106/1 "2024-12-02T04:58:23Z")

</div>

Dawn 15.1.0を使用しております。

モバイルのコレクションリストでは横に2列までしか増やす事が出来ないので、

こちらを3列、4列と表示できるようにするにはどのようなコーディングが必要でしょうか？

過去のバージョンなどでは回答があったのですが、

現在のバージョンで答えが見つからない為。

 ![スクリーンショット 2024-12-02 135439.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/b/c/bc86423c941123a834300ad3b7b5e4fe60c600e0.png)

↑ここを横3、4列に変更したい。

よろしくお願いします。

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [December 9, 2024, 7:33am UTC](https://community.shopify.com/t/dawn/378106/2 "2024-12-09T07:33:55Z")

</div>

@FEI 様

コレクションリストを3列、4列表示にする場合ですが、

コレクションリストのカスタムCSS欄にcssを追加することで対応が可能かと思われます。

手元にDawn15.1.0がなかったため、Dawn15.2.0を元に回答させていただきます。

### **前提条件**

モバイルのレイアウトを2列表示にする。

### **3列の場合**

カスタムCSSに下記コードを追加

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

```

 ![Qcoltd_0-1733729563546.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/c/f/cf9ff8a82a86b7bffafbf888bee3027c56a18825.png)

### **4列の場合**

カスタムCSSに下記コードを追加

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

```

 ![Qcoltd_1-1733729605796.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/9/b/9bea882230d78d1f2fbb2362cf392478ae099657.png)

ご参考まで。

（キュー小坂）

---

<div class="post-metadata">

**Author:** ![FEI](https://avatars.discourse-cdn.com/v4/letter/f/59ef9b/32.png) [@FEI](https://community.shopify.com/u/FEI)\
**Post date:** [December 10, 2024, 4:30am UTC](https://community.shopify.com/t/dawn/378106/3 "2024-12-10T04:30:03Z")

</div>

キュー 小坂様

ご丁寧にありがとうございます。

無事解決致しましたので、ベストソリューションとさせて頂きます。

よろしくお願いいたします。