Themify ShoppeでCSS Gridが効かない？カラムが重なる現象の解決策

2025年12月8日

はじめに

今回の記事で対象になるThemify Shoppeはお客様の使用しているテーマで私も初めて触らせていただくテーマです。あまり使用している方はいないかと思いますが、「テーマ特有のコードが邪魔をしてうまくいかない」というパターンは他にも共通することと思い記事にしました。

【今回躓いたパターン】

ビルダー標準の「Grid 4」「Grid 3」などの縛りではなく、自由なカラム数（5列など）やレイアウトを実装したかった。

しかし、単純にCSSを当てるだけではテーマ特有の仕様に阻まれてしまったので、その解決策をメモ。

前提：CSSの記述場所について

子テーマを使用していない場合、テーマファイルを直接編集するのはNG（アップデートで消えるため）。

今回は、「外観」>「カスタマイズ」>「追加CSS」に記述する方法を採用。これならテーマを更新しても安全。

フォントサイズのレスポンシブ化（clamp関数の活用）

スマホとPCでフォントサイズを滑らかに切り替えるため、現代的なCSS関数 clamp() を導入。

やり方：clamp(最小値, 推奨値, 最大値) を指定するだけ。

計算はジェネレーター（Min-Max Calculator）を使うと楽。

/* 例：h2をスマホで18px、PCで32pxの間で可変させる */
h2 {
  font-size: clamp(1.125rem, 0.727rem + 1.7vw, 2rem);
}

【本題】Themifyの行(Row)をCSS Gridで自由な列数にする

ビルダーの設定では「Custom Grid」が使いにくかったため、クラス名を付与してCSSで制御することにした。

手順：

ビルダーの行（Row）設定 > Styling > Custom CSS Class に任意のクラス名（例：my-custom-grid）を入力。
追加CSSで display: grid を指定。

しかし、ここで問題発生。

直面したトラブル：要素が1つ目のマスに重なってしまう

display: grid を指定し、検証ツールで見るとグリッドの枠はできているのに、中身のモジュールがすべて「1つ目のマス」に縦積みされてしまう現象が起きた。

原因：

Themify Shoppeの標準CSSが、子要素に対して強力な「配置指定」と「幅指定」を持っていたこと。

具体的には、テーマ側で「お前は1列目の要素だ」という指定が残っていたため、Gridの自動配置が効いていなかった。

解決コード

子要素（.module_column）に対して、テーマの標準スタイルを !important で強制リセットすることで解決。

決定版のCSSコード：

/* PCサイズ以上（例：768px〜）で適用 */
@media screen and (min-width: 768px) {

  /* 親要素：グリッドの枠を作る（例：3列） */
  .my-custom-grid .row_inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* ここを変えれば5列でも何列でもOK */
    gap: 20px; /* 余白 */
  }

  /* 子要素：Themifyの標準スタイルを「無効化」する */
  .my-custom-grid .module_column {
    /* 幅をリセット（%指定を解除） */
    width: auto !important; 
    
    /* 【最重要】配置場所のリセット */
    /* これがないと1つ目のマスに重なってしまう */
    grid-column: auto !important; 
    grid-row: auto !important;

    /* その他の干渉をリセット */
    float: none !important;
    margin: 0 !important;
  }
}

特に grid-column: auto !important; が重要。これで「空いているマスに順番に入る」というGrid本来の動きを取り戻せた。