Foundation のグリッドシステムは、ページ全体で12列まで使用できます。

個別に 12列全てを使用しないような場合は、列をグループ化してより広い列を作成することができます：

span 1

span 4

span 8

span 6

span 12

Foundation のグリッドシステムはレスポンシブで、画面サイズに応じて列が自動的に再構成されます。

グリッドクラス

上のクラスは、更に動的で柔軟なレイアウトを作成するために組み合わせて使用することができます。

Foundation グリッドの基本構造

最初に行を作成します（<div class="row">）。これは、縦方向の列に横方向のブロックを作成します。次に、small-num、medium-num および large-numにより必要とする列数を追加します。num の数字の合計は、行ごとに必ず 12 にする必要があることに注意してください。

下に、基本的な Foundation グリッドレイアウトの例のいくつか集めてみました。

3つの同幅なカラム

この例は、タブレットを始点としてデスクトップへ拡大する、3つの等幅カラムを作成する方法を示しています。スマホでは、自動的にカラムは縦に並びます：

例

<div class="row">
  <div class="medium-4 columns" style="background-color:yellow;">
    <p>Lorem ipsum..</p>
  </div>
  <div class="medium-4 columns" style="background-color:pink;">
    <p>Lorem ipsum..</p>
  </div>
  <div class="medium-4 columns" style="background-color:yellow;">
    <p>Lorem ipsum..</p>
  </div>
</div>

結果：

Lorem ipsum..

Try it Yourself »

2つの異なる幅のカラム

この例では、タブレットを始点としてデスクトップへ拡大する、2つの異なるカラムの作成方法を示しています：

例

<div class="row">
<div class="medium-4 columns" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="medium-8 columns" style="background-color:pink;">
<p>Lorem ipsum...</p>
</div>
</div>

結果：

Lorem ipsum...

Try it Yourself »

ミックス：モバイルおよびラップトップ/デスクトップ

.small-* (スマホ)、.medium-* (タブレット)および .large-* (ラップトップ/デスクトップ) は、よりダイナミックで柔軟なレイアウトを作成するために組み合わせることができます。

チップ: 各クラスは、下位互換のため、小型と大型デバイスに同じ幅を設定したい場合は、 .small-* だけを設定します。

この例で、大型デバイスにおいては 25%/75% の分割（.large-3 と .large-9）、小型デバイスにおいては 50%/50% の分割（.small-6 と .small-6）を作成します。結果を見るためには、ブラウザウィンドウのサイズを変更してください：

例

<div class="row">
<div class="small-6 large-9 columns" style="background-color:yellow;">
<p>.small-6 .large-9</p>
</div>
<div class="small-6 large-3 columns" style="background-color:pink;">
<p>.small-6 .large-3</p>
</div>
</div>

結果：

.small-6 .large-9

.small-6 .large-3

Try it Yourself »

Foundation Grids

Foundation グリッドシステム

グリッドクラス

Foundation グリッドの基本構造

3つの同幅なカラム

例

2つの異なる幅のカラム

例

ミックス：モバイルおよびラップトップ/デスクトップ

例