# マルチカラム

**URL:** <https://community.shopify.com/t/topic/231951>\
**Category:** 技術的なQ＆A\
**Tags:** css, html\
**Created:** [July 12, 2023, 3:03am UTC](https://community.shopify.com/t/topic/231951 "2023-07-12T03:03:20Z")\
**Posts on this page:** 3\
**Page:** 1

## AI-generated summary

- 問題: Shopify「Dawn」テーマのマルチカラムで、スマホ表示時に画像同士の余白がほぼ無くなる。PCは問題なしで、SPのみ余白を広げたい。

- 提案された解決策: テーマのカスタマイズ画面＞「マルチカラム」＞「カスタムCSS」に、スマホ向け（max-width: 749px）のメディアクエリを追加。
  - .grid の column-gap／row-gap を任意の値（例: 10px）に設定。
  - .grid--2-col-tablet-down .grid__item の幅を、gapを考慮した calc() で調整して2列レイアウトを維持。
  - 余白値（例の10px）は目的に合わせて変更可能。

- 補足: スクリーンショットで現象が共有され、コードはセクション単位の「カスタムCSS」に追記する形。

- 結果: 提案のCSSで問題は解決。依頼者が動作確認し完了報告。スレッドは実質クローズ。

<div class="post-metadata">

**Author:** ![kabu\_mcom](https://avatars.discourse-cdn.com/v4/letter/k/fbc32d/32.png) [@kabu\_mcom](https://community.shopify.com/u/kabu_mcom)\
**Post date:** [July 12, 2023, 3:03am UTC](https://community.shopify.com/t/topic/231951/1 "2023-07-12T03:03:20Z")

</div>

DAWNを使ってトップページの作成をしているのですが、マルチカラムを使って画像を並べると、スマホで見ると画像のように余白の部分がほとんどなく隙間がなくなってしまっているため、こちらの幅を広くしたいです。

（PC版は今の画像の幅間で問題ないので、SP版のみ変更希望です。）

 ![スクリーンショット 2023-07-12 115301.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/3/b/e/3be191cc0c08bd84d83462409f0397cf2dee1e68.png)

cssやコードでどうやればよいか、具体的にご教授いただきたいです。

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

---

<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:** [July 12, 2023, 9:53am UTC](https://community.shopify.com/t/topic/231951/2 "2023-07-12T09:53:53Z")

</div>

Kabu\_mcom様

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

Dawnのマルチカラムでしたら、以下のコードをカスタマイズ画面の「マルチカラム」\>「カスタムcss」に入力していただければ良いかと存じます。

```css
@media screen and (max-width: 749px) {
  .grid--2-col-tablet-down .grid__item {
    width: calc(50% - 10px / 2);
  }
  .grid {
    column-gap: 10px;
    row-gap:10px;
  }
}

```

 ![スクリーンショット 0005-07-12 18.49.41.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/1/0/10906b328588ea4969b1e73bc4a2581de01778ae.png)

「10px」の部分を任意の余白幅にご変更ください。

ご参考までに。

---

<div class="post-metadata">

**Author:** ![kabu\_mcom](https://avatars.discourse-cdn.com/v4/letter/k/fbc32d/32.png) [@kabu\_mcom](https://community.shopify.com/u/kabu_mcom)\
**Post date:** [July 13, 2023, 7:40am UTC](https://community.shopify.com/t/topic/231951/3 "2023-07-13T07:40:02Z")

</div>

株式会社フルバランス様

ご回答いただき、ありがとうございます！

教えていただいた方法にて無事解決できました。

ありがとうございました！

[プレビュー](https://community.shopify.com/topic/2137684)