前置き

Foundationに限らず、CSSフレームワークにはGrid（段組）機能が存在します。縦に流れていくソースコードを、見た目上横向きに表現したい。これはWebデザイン史上、常にデザイナーが求めてきたことであり、テーブルコーディングからCSSのfloatを用いるテクニックに切り替わり、さらにそれを汎用的に扱えるようにしたい、そういう世界中のWebデザイナーたちが求めた願望が、CSSフレームワークの段組システムだと考えています（960Gridとかね）

CSSについて

この記事は、FoundationのCSSバージョンをお使いの方にも通用する内容で書いています（Sass(SCSS)は出てきません）。FoundationのSass版とCSS版の違いについては、こちらの記事をご参照ください。

基本的なこと

さて、BootstrapやPureなど他のCSSフレームワークにもレスポンシブを前提とした段組機能はありますが、Foundationにも、当然存在します。この手のフレームワークに手を出す理由としては「効率よくレスポンシブデザインを表現したい」ということが前提になるかと思うのですが、Foundationに手を出すときも、まずお世話になるのがこのGrid機能でしょう。

なお、FoundationにおけるGrid機能は、一部を除き、Foundation 4、5、6と共通となっています。ここに記載されている内容も、一部を除き旧バージョンで通用しますので、参考になさってください。

記法

まず、よくある段組のマークアップを記載します。

設定としては、

右サイドバー
PC、タブレットの時は、メインとサイドバーが横方向に同時表示
スマホの時だけ、サイドバーがカラム落ちする（メインコンテンツの下にサイドバーの内容がくる）

という、よくあるパターンにします。

hoge.html

<div class="row">
  <div class="columns small-12 medium-8 large-8">
    <h2>メインコンテンツだぞ</h2>
    <p>ここにメインのコンテンツが入る予定　　ここにメインのコンテンツが入る予定　　ここにメインのコンテンツが入る予定　　ここにメインのコンテンツが入る予定　　ここにメインのコンテンツが入る予定　　ここにメインのコンテンツが入る予定　　ここにメインのコンテンツが入る予定　　</p>
    <p>ここにメインのコンテンツが入る予定　　ここにメインのコンテンツが入る予定　　ここにメインのコンテンツが入る予定　　ここにメインのコンテンツが入る予定　　ここにメインのコンテンツが入る予定　　ここにメインのコンテンツが入る予定　　ここにメインのコンテンツが入る予定　　</p>
    <p>ここにメインのコンテンツが入る予定　　ここにメインのコンテンツが入る予定　　ここにメインのコンテンツが入る予定　　ここにメインのコンテンツが入る予定　　ここにメインのコンテンツが入る予定　　ここにメインのコンテンツが入る予定　　ここにメインのコンテンツが入る予定　　</p>
    <p>ここにメインのコンテンツが入る予定　　ここにメインのコンテンツが入る予定　　ここにメインのコンテンツが入る予定　　ここにメインのコンテンツが入る予定　　ここにメインのコンテンツが入る予定　　ここにメインのコンテンツが入る予定　　ここにメインのコンテンツが入る予定　　</p>
    <p>ここにメインのコンテンツが入る予定　　ここにメインのコンテンツが入る予定　　ここにメインのコンテンツが入る予定　　ここにメインのコンテンツが入る予定　　ここにメインのコンテンツが入る予定　　ここにメインのコンテンツが入る予定　　ここにメインのコンテンツが入る予定　　</p>
  </div>
  <div class="columns small-12 medium-4 large-4">
    <h2>サイドバーだぞ</h2>
    <div class="desc">
      <p>ここにサイドバーのコンテンツが入ります　　ここにサイドバーのコンテンツが入ります　　ここにサイドバーのコンテンツが入ります　　ここにサイドバーのコンテンツが入ります　　ここにサイドバーのコンテンツが入ります　　ここにサイドバーのコンテンツが入ります　　</p>
    </div>
  </div>
</div>

結果はこんな感じ。

PCを想定

タブレットを想定

スマホを想定

スマホ時に見出しが小さくなっているのは、Foundationの初期設定に由来します。Gridの話とはまた別なので、これについてはまた別の機会に。

前提として理解しておきたいこと

.row > columns*n（必要な数）という構造を作る
初期設定では、.rowの横幅は1200px
カラムの幅は、.rowの幅の12分のn個
PCの時の幅は、.columnsに.large-nを追加
タブレットの時の幅は、.columnsに.medium-nを追加
スマホの時の幅は、.columnsに.small-nを追加

3がわかりにくいかもしれませんが、今回のケースでは、PCとタブレットの時はメインコンテンツとサイドバーの比率が、8:4の幅で表示されるようにしています。つまり、.rowの中にあるlarge-nとlarge-n、medium-nとmedium-nの総和が12になれば、Gridシステムとして成立する仕組みになってます。

一方、スマホの場合は.small-12となっていますが、これは12を指定すれば、.rowに対して100%の幅を取るという意味になります。

左右サイドバーなパターン

ここで、上記の理解をさらに深めるため、もう少し複雑なパターンを見てみましょう。

左右にサイドバーがある
スマホの時はすべて１カラム、PC、タブレットのときに左右サイドバーが出る

という前提です。

hoge.html

<div class="row">
  <div class="columns small-12 medium-3 large-3">
    <h2>左サイドバー</h2>
    <div class="desc">
      <p>左サイドのコンテンツです　　左サイドのコンテンツです　　左サイドのコンテンツです　　左サイドのコンテンツです　　左サイドのコンテンツです　　左サイドのコンテンツです　　</p>
    </div>
  </div>
  <div class="columns small-12 medium-6 large-6">
    <h2>メインコンテンツです</h2>
    <div class="desc"></div>
    <p>メインのコンテンツです　　メインのコンテンツです　　メインのコンテンツです　　メインのコンテンツです　　メインのコンテンツです　　メインのコンテンツです　　メインのコンテンツです　　メインのコンテンツです　　メインのコンテンツです　　メインのコンテンツです　　メインのコンテンツです　　メインのコンテンツです　　メインのコンテンツです　　メインのコンテンツです　　メインのコンテンツです　　</p>
  </div>
  <div class="columns small-12 medium-3 large-3">
    <h2>右サイドバー</h2>
    <div class="desc">
      <p>左サイドのコンテンツです　　左サイドのコンテンツです　　左サイドのコンテンツです　　左サイドのコンテンツです　　左サイドのコンテンツです　　左サイドのコンテンツです　　</p>
    </div>
  </div>
</div>

PCを想定

タブレットを想定

スマホを想定

解説

今回は、左カラム、メイン、右カラムの比率を、3:6:3で作っています。従って、前提条件を満たすため、.columns.small-12.medium-3.large-3+.columns.small-12.medium-6.large-6+.columns.small-12.medium-3.large-3という並びになっています。

まとめ

.row > .columns*n という構造を守る
PCの時の幅は.columns.large-n
タブレットの時の幅は.columns.medium-n
スマホの時の幅は.columns.small-n
カラムの比率は、nの総和が12になるようにする

これを守っていれば、ひとまずGridを自由に扱えるようになると思います。