デザイン

3カラムデザインの使いどころ|2026年の判断基準と組み方

この記事の対象: レイアウト構成を検討している発注担当者・3カラムを採るか迷っている制作者
読了時間: 約11分

3カラムデザインを採るべきか。結論から言うと、判断は3つの目安で片付きます。ページ数が1,000を超えているか/カテゴリが15個以上あるか/中央カラムに640pxを確保できるか。この3つが揃わないなら2カラム以下にしたほうが、公開後の運用まで含めて確実に良くなります。「3カラムは古い」という言い方が広まっていますが、古くなったのはレイアウトではなく、目的に合わない場所で使う判断のほうです。以下、この3条件の理由と、実際に組むときのCSS、そしてSoreiine!!のギャラリーに集まっている実例から見えるレイアウトの現在地を順に扱います。


3カラムデザインを採用してよいか|先に判断基準だけ

3つの条件で即断できる

迷っている時間のほうが高くつくので、判断表を先に置きます。

条件 3カラムが成立する目安 満たさないとどうなるか
ページ数 1,000ページ以上(最低でも100) サイドバーを埋める材料が枯れる
カテゴリ数 15個以上、または2階層以上 左カラムがリンク3本の空白地帯になる
訪問者の目的 「探す」(回遊・比較・絞り込み) CVへの導線が左右に分散して弱まる
中央カラムの幅 640px以上を確保できる 本文が1行20文字台になり読めない
更新体制 サイドバーを月1回以上更新できる人がいる 半年前のお知らせを晒す場所になる
閲覧環境 デスクトップが半数以上 設計の前提がモバイルで消える

上4つのうち3つ以上に○が付くなら検討する価値があります。2つ以下なら2カラムが正解です。とくに「中央640px」は計算で機械的に出るので、感覚の議論に入る前に電卓を叩いてください。

レイアウト選択の判断分岐

3カラムを検討してよい

  • ページ数が1,000以上ある
  • 探索・絞り込みが主目的
  • デスクトップ利用が主体
  • サイドバーを更新し続ける体制がある

1〜2カラムにすべき

  • 10〜30ページの企業サイト
  • 問い合わせ・購入が目的
  • モバイルからのアクセスが大半
  • 更新担当が1人以下

左右どちらに寄るかは、サイトの規模ではなく「訪問者が何をしに来るか」でほぼ決まります。読みに来るサイトと、探しに来るサイトの違いです。

幅の計算は3行で終わる

中央640pxが確保できるかは、足し算だけで答えが出ます。

左サイドバー 240px + 中央 640px + 右サイドバー 300px
+ gap 32px × 2 = 64px
+ 外側の余白 24px × 2 = 48px
------------------------------------------------
合計 1,292px

この1,292pxが、3カラムが成立する最小のブラウザ幅の目安です。1,280pxのノートPCでギリギリ足りない計算になるので、対象ユーザーのディスプレイが13インチ中心なら、この時点で3カラムは苦しいと判断できます。逆にコードを書く前に分かるので、デザインに入る前の5分で済ませてください。

「古い」と言われる理由は用途のミスマッチ

3カラムが減った直接の理由は閲覧環境の変化ですが、批判の中身を分解すると、どれもレイアウト自体の欠陥ではありません。

  • モバイル比率の上昇 — 横幅を前提にした設計なので、縦長の画面ではカラムの概念そのものが消える
  • 1カラムLPの普及 — コンバージョンが目的のページでは、選択肢を減らす設計が主流になった
  • サイドバーの効きへの疑問 — 漫然と置いた「人気記事」「アーカイブ」はほとんど押されない
  • 広告枠としての役割の縮小 — 右カラムを広告で埋める設計は、閲覧者の広告耐性が上がって効きが落ちた

いずれも「目的の合わない場所で3カラムを使ったこと」への批判です。1カラムが正しい場面で3カラムを使えば失敗しますし、その逆も同じように失敗します。


3カラムの構造|左右のカラムに別の仕事をさせる

左は「移動」、右は「発見」

3カラムデザインは、コンテンツエリアを縦に3分割したレイアウトです。もっとも一般的なのは「左サイドバー・メインコンテンツ・右サイドバー」の並びで、読ませたいものを中央に置いて両側に補助情報を配置します。

3カラムの代表的な役割分担

左カラム(移動)

  • カテゴリ一覧
  • 階層メニュー
  • 絞り込み条件

中央カラム(メイン)

  • 記事・商品・本文
  • 読ませたい情報

右カラム(発見)

  • 関連情報・ランキング
  • 目次・アクション

左右の役割が重なった時点で、3カラムは画面を狭めるだけの構成になります。

左は「今どこにいて、どこへ行けるか」を示す移動の手段、右は「ついでに見るとよさそうなもの」を示す発見の手段。この分担が曖昧なまま両側にサイドバーを置くと、幅を削っただけで終わります。

もうひとつ、左右どちらもナビゲーションではないパターンもあります。管理画面でよくある「左メニュー・一覧・詳細プレビュー」の並びで、右カラムが補助情報ではなく作業対象そのものになる型です。中央と右を行き来しながら操作するため、右カラムの幅を広めに取る必要があります。同じ3分割でも勘所が違うので、どちらの型を作るのかを先に決めておくと、幅の議論が空転しません。

2カラムとの違いは「情報の増やし方」

2カラム 3カラム
メイン幅 広い(本文が読みやすい) 狭い(1行の文字数が減る)
同時に見える補助情報 1系統 2系統
情報の探し方 上から下へ順に 左右を行き来しながら
向く情報量 数十〜数百ページ 数千ページ以上
モバイル対応 縦積みで自然 積む順番の設計が必須
運用の手間 少ない サイドバー2つ分の更新が発生

3カラムが強いのは一覧性です。カテゴリが数十個あるサイトで、階層をたどらずに横断できる導線を常に画面内に残せます。逆にページ数が少ないサイトで採ると、サイドバーを埋めるためのコンテンツを無理に作る羽目になります。空のサイドバーほど作りかけに見えるものはありません。

向いているケース・向いていないケース

機能するのは次の条件が重なったときです。

1. 情報が多く、分類が階層になっている — ページ数が数千を超え、カテゴリが多層のサイト。左カラムに分類を常設すると、戻るボタンを押さずに横移動できます。

2. 探索が目的の行動になっている — 「なにか良いものを見つけたい」という目的で訪れるサイト。ECの一覧ページや作品ギャラリーでは、絞り込み条件(左)・結果(中央)・関連候補(右)を同時に見せられる構造が素直に効きます。

3. 滞在が長く、操作を繰り返す — 管理画面や社内ツール。1画面に情報を詰めることが正義になり、スクロール回数が減るほど作業が速くなります。

4. デスクトップ利用が主体 — BtoBの資料閲覧サイト、業務システム、開発者向けドキュメント。アクセス解析でPC比率が高いと確認できているなら、PC最適を優先する判断はあり得ます。

逆にまずいのは、中小企業のコーポレートサイトで3カラムを選ぶケースです。会社概要・事業内容・実績・採用・お問い合わせという構成で、左右にサイドバーを置いても入れるものがありません。結果として「新着情報」と「バナー2枚」で埋めることになり、メインの幅を削っただけの構成になります。

コンバージョンを取りたいページでも不利です。問い合わせや購入に向かわせたいときに、画面の左右へ「別のところへ行ける導線」を並べるのは目的に逆行します。サイトの目標を先に決めておくと、この判断は自動的に片付きます。

もうひとつ見落とされやすいのが更新体制です。3カラムはサイドバー2つ分の枠を埋め続ける前提の設計で、放置するとその枠が「半年前のお知らせ」を晒す場所になります。メイン記事の更新すら止まりがちな体制なら、埋める場所を最初から作らないほうがサイトは長く清潔に保てます。レイアウトは公開日の見た目ではなく、1年後の見た目で選ぶものです。


3カラムレイアウトの実装|CSS Gridで組む

基本のCSSと、崩れの原因

3カラムはCSS Gridでもっとも簡潔に書けます。

.layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 300px;
  gap: 32px;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 24px;
}

要点は minmax(0, 1fr) です。単に 1fr と書くと、中央に長いURLや折り返さない要素が入ったときにカラムが押し広げられ、レイアウト全体が崩れます。1fr は実質 minmax(auto, 1fr) として扱われ、auto は中身の最小幅を下回れないためです。min を 0 に固定しておくと、中身が何であれ指定した比率を守ります。3カラムの崩れの相談で一番多いのがこれです。

サイドバーの幅は、載せる情報の性質で決まります。

用途 推奨幅 理由
カテゴリメニュー(左) 200〜260px 日本語のカテゴリ名10〜14文字が折り返さない
目次(左または右) 220〜280px 見出しの階層をインデントで示す余裕を残す
関連記事・サムネイル付き(右) 280〜320px 画像を横100px前後で置いてもテキストが2行に収まる
広告枠(右) 300px + gap 300×250、300×600の標準サイズに合わせる
メイン(中央) 最低640px 本文の1行を全角35〜40文字に保つ

px で固定するか fr で可変にするかは中身で決めます。文字数の上限が読めるカテゴリメニューは固定幅が安全です。フィルタUIやサムネイルの並びのように画面幅に応じた余裕がほしいものは minmax(240px, 0.8fr) としておくと、大型ディスプレイで間延びしません。3つすべてを fr にすると幅の予測が立たなくなるので、可変にするのは多くても1つに絞ります。

レスポンシブ|一気に1カラムへ落とさない

3カラムのレスポンシブは段階的に減らすのが基本です。

.layout {
  display: grid;
  gap: 32px;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 24px;
  /* モバイル: 1カラム */
  grid-template-columns: minmax(0, 1fr);
}

/* タブレット横〜小型ノート: 2カラム(左サイドバーを残す) */
@media (min-width: 900px) {
  .layout {
    grid-template-columns: 220px minmax(0, 1fr);
    grid-template-areas:
      "nav main"
      "nav sub";
  }
  .layout-nav  { grid-area: nav; }
  .layout-main { grid-area: main; }
  .layout-sub  { grid-area: sub; }
}

/* デスクトップ: 3カラム(240+640+300+gap64+padding48=1292px) */
@media (min-width: 1280px) {
  .layout {
    grid-template-columns: 240px minmax(0, 1fr) 300px;
    grid-template-areas: "nav main sub";
  }
}

grid-template-areas を使うと、ブレークポイントごとの並びを名前で書けます。「左サイドバーは残し、右サイドバーだけ本文の下へ移す」という中間状態が1行で書けるため、配置が変わるレイアウトでは値の羅列より読みやすくなります。

ブレークポイントの値は、端末の型番ではなくレイアウトが破綻する幅から決めます。上の例で1280pxを境にしているのは、先ほどの1,292pxの計算があるからです。「iPadは768px」といった端末基準で切ると、実機では問題ないのにブラウザを少し狭めた瞬間に崩れます。計算式はコメントに残しておくと、後から幅を変える人が同じ計算をやり直さずに済みます。

対応ブラウザ: CSS Grid(grid-template-areas 含む)と minmax() は、Chrome・Edge・Firefox・Safariの現行版で問題なく動きます。IE対応が要件に入る案件はもう例外的ですが、残っているならFlexboxかfloatで組むほうが安全です。

モバイルで崩れる原因は「積む順番」

つまずくのはCSSの書き方ではなく順番の設計です。HTMLを 左サイドバー → メイン → 右サイドバー で書くと、1カラムに落ちたとき「カテゴリ一覧を延々スクロールしてから本文が始まる」状態になります。

方法1:HTMLの順番をモバイル基準にする

メイン → 左サイドバー → 右サイドバー の順でマークアップし、デスクトップで grid-template-areas を使って並べ替えます。DOM順が読む順と一致するため、スクリーンリーダーやキーボード操作でも自然です。新規で組むならこちらを選びます。

<div class="layout">
  <main class="layout-main">本文</main>
  <nav class="layout-nav" aria-label="カテゴリ">カテゴリ一覧</nav>
  <aside class="layout-sub">関連情報</aside>
</div>

方法2:左サイドバーをモバイルでドロワーに逃がす

カテゴリ数が多くて縦積みに向かない場合、モバイルでは開閉式のパネルに格納します。<details> を使えばJavaScriptなしで書けます。

<nav class="layout-nav" aria-label="カテゴリ">
  <details class="nav-drawer" open>
    <summary>カテゴリを絞り込む</summary>
    <ul>
      <li><a href="/category/a/">カテゴリA</a></li>
      <li><a href="/category/b/">カテゴリB</a></li>
    </ul>
  </details>
</nav>
/* デスクトップでは常時展開し、開閉UIを消す */
@media (min-width: 900px) {
  .nav-drawer > summary { display: none; }
  .nav-drawer > ul { display: block !important; }
}

open 属性を初期状態に付けておくと、CSSが読み込まれる前でも中身が見えます。JavaScriptに依存しないので、スクリプトのエラーでナビゲーションが消える事故も起きません。開閉アニメーションまで付けたい場合の実装は下の記事にまとめています。

つまずきやすい点: Gridの並べ替えは見た目だけを変えます。Tabキーのフォーカス移動はDOM順のままなので、視覚的に「左→中央→右」に並べたのにDOMが「中央→左→右」だと、キーボード操作の順序が画面と食い違います。並べ替えの幅は最小限にとどめ、大きく入れ替えたくなったらHTML側を直すのが正解です。

右カラムをスクロール追従にする

右カラムに目次やアクションボタンを置くなら、追従させると使われる回数が上がります。

.layout-sub > .sticky-box {
  position: sticky;
  top: 24px;          /* 固定ヘッダーがあるならその高さ + 余白 */
  max-height: calc(100dvh - 48px);
  overflow-y: auto;   /* 中身が画面より長いときに追従が止まるのを防ぐ */
}

max-height と overflow-y をセットで指定するのが要点です。追従させたい要素が画面の高さを超えると、sticky は下端まで到達したところで止まり、以降は通常配置に戻ります。目次の項目が多いページで「途中から追従しなくなる」のはこれが原因です。高さを画面内に収め、あふれる分は要素内でスクロールさせると最後まで追従します。dvh を使っているのは、モバイルのアドレスバーの伸縮で vh が実際の表示領域とずれるためです。

もうひとつ、sticky は祖先要素に overflow: hidden が付いていると効きません。3カラムのラッパーに何気なく指定した1行が原因で追従しない、というのは調査に時間を取られやすい失敗です。原因の切り分け方は下の記事に整理しています。

中央カラムの読みやすさを守る

3カラムでもっとも損なわれるのは本文の読みやすさです。幅が狭いまま長文を流すと、1行の文字数が20文字台に落ちて視線が何度も折り返します。

.layout-main {
  /* 本文の行長を全角35〜40文字に制限 */
  --measure: 38em;
}
.layout-main p,
.layout-main li {
  max-width: min(100%, var(--measure));
  line-height: 1.85;
}

日本語の場合 em は全角1文字とほぼ等しいので、38em で全角38文字前後になります。行送りは1.8〜1.9が読みやすい範囲で、これより詰めると漢字の多い文章で行が見分けにくくなります。

この max-width は本文テキストにだけかけます。画像・表・コードブロックまで38emに縛ると、狭い中央カラムでさらに窮屈になります。図版は中央カラムの幅いっぱいに広げ、テキストだけ行長を制限する。読みやすさと見やすさは別の指標なので、要素ごとに分けて考えます。


Soreiine!!ギャラリーで実例を読む|3カラムはどう残っているか

Soreiine!!のギャラリーには、公開中のWebサイトが日々集まっています。レイアウトの判断で迷ったときは、実物を「なぜこの構成なのか」の視点で見ていくのが一番早い学習です。

【画像挿入: Soreiine!!ギャラリーの一覧画面。カテゴリ絞り込みとサイトサムネイルが並んだ状態】

ギャラリーの一覧画面そのものが3カラム的発想の実例

ギャラリーのような「探すために来るサイト」は、3カラム的な情報配置がそのまま機能する典型です。Soreiine!!のギャラリー一覧では、絞り込み条件(業種・色・レイアウト)/サイト一覧/関連するサイトへの導線という3つの情報が同時に必要になります。訪問者の行動が「1つのページを読む」ではなく「条件を変えながら何度も一覧を眺める」ものだからです。

見どころは、絞り込み条件を常に触れる位置に置いているかどうか。条件を変えるたびにページ上部へ戻る設計だと、探索の回数が伸びません。3カラムを採る理由がここにあります。

掲載サイトを見比べると分かる3つの傾向

Soreiine!!に掲載されているサイトを業種・目的を変えながら並べて見ていくと、次の3つの傾向が浮かびます。個別のサイト名を挙げるより、構成の型として押さえておくほうが応用が利きます。

傾向1:純粋な3カラムは減り、「2.5カラム」が増えた

左右にサイドバーを常設する構成ではなく、片側だけを固定し、もう片方をスクロール追従の目次やアクションボタンに置き換えたパターンが目立ちます。カラムとして枠を作らず、必要な情報だけを画面端に浮かせる考え方です。具体的には、記事ページで左に目次を sticky で置き、右は余白のまま空けておく。枠線も背景色も与えないため見た目は1カラムに近いのに、機能としては3カラムの左カラムと同じ仕事をしています。

傾向2:ECとメディアで残り方が違う

商品一覧を持つサイトでは、絞り込みを左に置いた実質3カラムがしっかり残っています。価格帯・カラー・サイズといった条件を同時に触れる必要があるためで、この用途に代わる形はまだ現れていません。一方でコーポレートサイト・ブランドサイトはほぼ1カラムに寄り、サイドバーを持ちません。扱う情報量と来訪者の目的の違いが、そのまま構成に出ています。

傾向3:モバイルでは3カラムの痕跡が消えている

デスクトップで3カラムのサイトも、モバイルでは絞り込みをボトムシートやモーダルへ逃がし、本文だけを縦に流しています。「3カラムをそのまま縮める」設計はもう見かけません。逆に言えば、モバイルの画面だけを見てそのサイトのレイアウトを判断することはできない、ということでもあります。

掲載サイトを見るときの着眼点

見る場所 確認すること
左カラム 全ページで内容が同じか、ページごとに変わるか
中央の幅 本文の1行が何文字か(数えると設計意図が分かる)
右カラム スクロールに追従するか、上部で止まるか
モバイル表示 サイドバーの中身がどこへ行ったか
ウィンドウを狭める 何pxで2カラムに落ちるか

とくに「ウィンドウを狭めてブレークポイントを探す」作業は、5分で終わるうえに得るものが多い方法です。うまく作られたサイトは、カラムが減る瞬間に情報の優先順位が見えます。何が最初に消え、何が最後まで残るか。それが作り手の優先順位そのものです。

【画像挿入: 同一サイトのデスクトップ表示とモバイル表示を並べた比較図】


3カラムを採用する前に決めておくこと

サイドバーの中身を先に確定させる

3カラムで失敗する案件の共通点は、レイアウトを先に決めてから中身を考えることです。順番が逆で、載せるものが決まっていないカラムは必ず余ります。

3カラム採用の検討フロー
1. 目的を書く問い合わせか、回遊か、作業効率か
2. 中身を並べる左右に載せる項目を実名で列挙する
3. 更新頻度を決める誰が月何回更新するか
4. 幅を計算する中央640px以上が確保できるか
5. 判断する1つでも欠けたら2カラムへ

2番目で「新着情報」「バナー」しか出てこないなら、その時点で3カラムをやめる判断ができます。項目名を書き出す作業は5分で済み、公開後に空のサイドバーを見て後悔する時間よりはるかに短い。

CMSで実現できるかを確認する

3カラムはテンプレートの構造に手が入るため、使うCMSで難易度が変わります。

  • WordPress — テーマ次第。3カラム対応をうたうテーマは減っており、既存の2カラムテーマに追加するには子テーマでテンプレートを書く必要がある
  • ノーコード系(STUDIO・Wixなど) — デスクトップの3分割は組めるが、レスポンシブの落とし方に制約が出やすい
  • Shopify — 商品一覧の絞り込みサイドバーを標準機能として持つテーマが多く、実質3カラムに近い構成を作りやすい

WordPressで一覧ページを3カラム化するなら、アーカイブテンプレートを自分で書く前提になります。カスタム投稿の一覧まで含めて組む手順は下の記事が近いので、着手前に構造を確認しておくと手戻りが減ります。

発注時に費用が動くポイント

3カラムは「カラムを1本増やすだけ」に見えて、見積もりの前提を変える要素を含みます。金額は要件と制作会社によって幅が出ますが、どこで工数が積み上がるかは共通しています。

  • ブレークポイントの数 — 1カラムなら2段階で足りるところ、3カラムは3段階以上。デザインカンプの点数と検証の手間がそのまま増える
  • テンプレートの分岐 — 一覧ページだけ3カラム、詳細ページは2カラムという使い分けをすると、テンプレートの種類が増える
  • サイドバーの動的要素 — ランキング・絞り込み・スクロール追従は、静的なバナーを並べるのとは実装の性質が違う
  • 公開後の更新運用 — サイドバーを管理画面から差し替えられるようにするか、コード直書きにするかで、初期費用と運用負荷が逆向きに動く

見積もりを取るときは「3カラムでお願いします」ではなく、上の4点を要件として渡すと、各社の金額が比較可能な形で並びます。レイアウト名だけを伝えると、含まれる範囲が会社ごとに違ったまま金額だけが並ぶことになり、比較の意味がなくなります。費用の水準そのものは、要件と制作会社によって幅があるため、ここでは条件の整理にとどめます。

既存サイトを3カラムに変えるべきか

すでに動いているサイトのレイアウト変更は、費用と効果を秤にかける話になります。3カラム化が目的になっている場合、その多くは「回遊率が低い」「直帰率が高い」という別の課題への対処として持ち出されています。

その課題がレイアウトに起因しているのかを先に確かめてください。回遊が起きない原因は、サイドバーの不在よりも記事内の関連導線の不足や、そもそも回遊先のページが薄いことにある場合が多いです。レイアウトを変えれば直る問題と、変えても直らない問題を切り分けてから見積もりを取ると判断が早くなります。

一部だけ3カラム化する選択肢もあります。ブログ一覧や商品一覧など探索が起きるページだけをサイドバー付きにして、コーポレート系の固定ページは1カラムのままにする。ページの目的ごとにレイアウトを変えるのは矛盾ではなく、むしろ目的に沿った設計です。


よくある質問

3カラムデザインはもう古いのですか?

古くなったのはレイアウトではなく、目的に合わない場所で使う判断のほうです。ページ数が数千規模で、訪問者が「探す」ために来るサイトでは今も最適解になります。逆に10〜30ページのコーポレートサイトで採ると、埋める材料がなくてメインの幅を削るだけの構成になります。

3カラムデザインはSEOに不利ですか?

カラム数そのものが検索順位に直接影響することはありません。ただしメイン以外の領域が増えるぶん、全ページ共通のテンプレート由来テキストがページに占める割合は上がります。中央カラムに十分な情報量があれば問題になりません。

スマートフォンで3カラムはどう表示すべきですか?

縦に1カラムへ落とし、メインコンテンツを最上部に置きます。左サイドバーのカテゴリメニューは開閉式のパネルやモーダルに格納し、本文より先に長い一覧が現れないようにしてください。デスクトップの3カラムをそのまま縮めて横スクロールさせる実装は避けます。

3カラムのレイアウトが崩れるのはなぜですか?

CSS Gridで組んでいる場合、grid-template-columns に 1fr を指定しているのが原因の大半です。minmax(0, 1fr) に変えると、中央に長いURLや画像が入ってもカラム幅が保たれます。それでも崩れるなら、サイドバー内の要素に固定幅が入っていないか確認してください。

サイドバーには何を載せればよいですか?

左は移動のための情報(カテゴリ、階層メニュー、絞り込み条件)、右は発見のための情報(関連コンテンツ、ランキング、目次、アクションボタン)に分けます。両側に似た内容を置くと画面を狭めるだけになります。載せるものが思いつかない側は、無くしてしまうのが正しい判断です。


まとめ

3カラムデザインは古くなったのではなく、適用範囲が絞られただけです。判断の軸を最後に整理します。

  • 判断は3つの目安で終わる — ページ数1,000以上/カテゴリ15個以上/中央640px確保。揃わないなら2カラム
  • 幅は計算で決める — 240+640+300+gap64+padding48=1,292px。これが成立の最小幅の目安
  • サイドバーの中身を先に実名で書き出す — 出てこないなら3カラムは選ばない
  • 実装は minmax(0, 1fr) と grid-template-areas — 崩れとレスポンシブの大半はこの2つで片付く
  • モバイルは縮めるのではなく組み替える — メインを最上部に、ナビは開閉式へ逃がす
  • ページ単位で使い分けてよい — 一覧は3カラム、固定ページは1カラムという構成は矛盾しない

迷ったら、実際に公開されているサイトを見るのが最短です。Soreiine!!のギャラリーでは業種やレイアウトから絞り込んで実例を探せます。ウィンドウの幅を変えながら、どこでカラムが減るのかを追ってみてください。作った人の判断がそこに出ています。