# マルチカラムを3列2行に表示したい

**URL:** <https://community.shopify.com/t/3-2/230430>\
**Category:** 技術的なQ＆A\
**Tags:** css\
**Created:** [July 6, 2023, 10:11am UTC](https://community.shopify.com/t/3-2/230430 "2023-07-06T10:11:22Z")\
**Posts on this page:** 3\
**Page:** 1

## AI-generated summary

DAWN 8.0.0テーマで商品ページのカテゴリーアイコンをマルチカラムボタンで表示する際、横3列×縦2行（計6カテゴリー）のレイアウトを実現したいという質問。特にモバイル表示で3列並びにする方法が課題。

**解決方法（DAWN 10.0.0ベース）:**

1. **セクション設定の拡張**
   - `multicolumn.liquid`の333行目付近でモバイル列数の選択肢を2から3に拡張

2. **CSSクラス名の変更**
   - 46行目の`<ul>`タグ内のclass属性を修正
   - `grid--{{ section.settings.columns_mobile }}-col-tablet-down`を`grid--{{ section.settings.columns_mobile }}-col`に変更

この2つの変更でモバイルでも3列表示が可能になり、質問者は解決を確認。

<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 6, 2023, 10:11am UTC](https://community.shopify.com/t/3-2/230430/1 "2023-07-06T10:11:22Z")

</div>

DAWN 8.0.0 テーマにて、商品ページを作成しているのですが

商品のカテゴリーごとにアイコンを作りたく、マルチカラムのボタンで各カテゴリ（コレクション）に飛ばしたいと思っています。

モバイルで表示する際にボタンを３つ横並びで表示させ、2行にしたいのですが、そちらは可能なのでしょうか。

カテゴリは6つありそれを横に3列、縦に2列にしたいです。

どうぞよろしくお願い致します。

---

<div class="post-metadata">

**Author:** ![Anonymous\_8211fd25ebe09fd6791272169071c260](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/anonymous_8211fd25ebe09fd6791272169071c260/32/247439_2.png) [@Anonymous\_8211fd25ebe09fd6791272169071c260](https://community.shopify.com/u/Anonymous_8211fd25ebe09fd6791272169071c260)\
**Post date:** [July 10, 2023, 1:49am UTC](https://community.shopify.com/t/3-2/230430/2 "2023-07-10T01:49:19Z")

</div>

Dawnの8.0.0は持っていないので、10.0.0で説明します。

対象のコードはセクションの「multicolumn.liquid」になります。

まず最初にセクション設定からモバイルでの列数を2から3に拡張します。333行目付近からそのコードになっており、optionに3列を加えます。

 ![_0-1688953336193.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/0/8/0807014fbd090def07bb462886cd174841e530d9.png)

次にモバイルで3列に表示できるよう、class名を一部変更します。

46行目に、

というコードがありますが、このうちの「grid–{{ section.settings.columns\_mobile }}-col-tablet-down」というclass名を「grid–{{ section.settings.columns\_mobile }}-col」に変更してください。

これで完了です。

---

<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 11, 2023, 1:55am UTC](https://community.shopify.com/t/3-2/230430/3 "2023-07-11T01:55:44Z")

</div>

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

とても助かりました！