Foundation のグリッドシステムは、ページ全体で 12 カラムまで使用できます。
別々に 12 カラムすべてを使用したくない場合は、一緒にグループ化してより広いカラムを作成することができます：
| span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 |
| span 4 | span 4 | span 4 | |||||||||
| span 4 | span 8 | ||||||||||
| span 6 | span 6 | ||||||||||
| span 12 | |||||||||||
Foundation のグリッドシステムはレスポンシブなため、画面サイズに応じて画面が自動的に再配置されます： 大型画面では、3 カラムにコンテンツを編成した方がより良く見えるかもしれませんが、 小型画面では、コンテンツ項目を互いの上に積み重ねた方が良く見えるでしょう。
Foundation グリッドシステムには3つのクラスがあります：
.small (スマホ用).medium (タブレット用).large (ラップトップとデスクトップ用)上のクラスは、より動的で柔軟なレイアウトを作成するために組み合わせることができます。
チップ: 各クラスは、より下位のクラスに従います。従って、 .medium と .large に同じ幅を設定する場合は、 .medium にのみ指定するだけで構いません。
Foundation グリッドの基本的な構造は、次のとおりです：
<div
class="row">
<div class="small|medium|large-num
columns"></div>
</div>
<div
class="row">
<div class="small|medium|large-num
columns"></div>
<div class="small|medium|large-num columns"></div>
<div class="small|medium|large-num columns"></div>
</div>
<div
class="row">
...
</div>
先ず、行を作成します (<div class="row">)。これは、縦カラムの横方向のブロックを作ります。
次に、small-num や medium-num や large-num で、
必要なだけのカラム数を追加します。num の数値の合計は、行ごとにいつも 12 でなけれならない
ことに注意してください。
<div
class="row">
<div class="small-12
columns">.small-12 yellow</div>
</div>
<div
class="row">
<div class="small-8
columns">.small-8 beige</div>
<div class="small-4 columns">.small-4 gray</div>
</div>
<div
class="row">
<div class="large-9 small-8
columns">.small-8 .large-9 pink</div>
<div class="large-3 small-4 columns">.small-4 .large-3
orange</div>
</div>
結果：
上の例の最初の行によって、マークアップは、12 カラムのスペース（幅 100%）を取るために、クラス .small-12
を持つ <div> を定義しています。
次の行は、2 つのカラムを指定しています; .small-8 は、幅を 66.6% 取る一方で、.small-4 は
33.3% を取り、Foundation は、互いの隣にこれを一列に並べます。
3番目の行では、各カラムに 1 つ余分にクラスを追加しました (.large-3 と .large-9)。
これは、ページが大型画面で表示される時は、カラム幅が 25% (.large-3) と 75% (.large-9) に
分割されることを意味しています。
また、small クラスも指定しているので、小型および中型画面（スケールアップ）に対して、カラムは 33％ (.small-4) と
66％ (.small-8) に分割されます。これは、異なる画面サイズのレイアウトを再配置するのに便利です。
次の表は、Foundation グリッドシステムが複数のデバイス間でどのように機能するかをまとめたものです：
| 小型デバイス スマホ (<40.0625em (640px)) |
中型デバイス タブレット (>=40.0625em (640px)) |
大型デバイス ラップトップ & デスクトップ (>=64.0625em (1025px)) |
|
|---|---|---|---|
| グリッドの挙動 | 常に水平 | 開始時は折畳まれ、ブレークポイントを超えると水平に | 開始時は折畳まれ、ブレークポイントを超えると水平に |
| クラス接頭辞 | .small-* | .medium-* | .large-* |
| カラム数 | 12 | 12 | 12 |
| ネストの可能 | Yes | Yes | Yes |
| オフセット | Yes | Yes | Yes |
| カラム順序 | Yes | Yes | Yes |
グリッド (.row) の最大幅は 62.5rem です。ワイド画面で、幅が 62.5rem 以上であるときは、
たとえ幅を 100% に設定しても、カラムはページの幅全体に広がることはありません。
しかし、新しい最大幅を設定することによって CSS でこれをオーバーライドすることができます：
<style>
.row {
max-width: 100%;
}
</style>
Default:
With 100% max-width:
デフォルトの最大幅を使用しているにもかかわらず、ページの幅全体に背景色を使用したい場合は、
.row の周りをコンテナ要素でラップし、望みの背景色を指定します：
Default:
With container:
次章から、異なったデバイスのためのグリッドシステム例を示します：