Foundation グリッドの例

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

3 つの等しいカラム

この例は、中型デバイス（タブレット）で始まり、ラップトップ/デスクトップにスケーリングされる 3 つの等幅カラム （33.3%/33.3%/33.3%）を作る方法を示しています。携帯電話では、カラムが自動的にスタックされます：

3 つの等しくないカラム

この例は、タブレットで始まり、大型のデスクトップにスケーリングされる、3 つの様々な幅のカラム （25%/50%/25%）を作る方法を示しています。携帯電話では、列が自動的にスタックします。 携帯電話では、カラムが自動的にスタックされます：

2 つの等しい幅のカラム

この例は、すべてのデバイスに等しい幅のカラム 2 つの作成方法を示しています （携帯電話、タブレット、ラップトップおよびデスクトップに対して常に 50%/50%）：

2 つの等しくない幅のカラム

この例は、すべてのデバイスに等しくない幅のカラム 2 つの作成方法を示しています （携帯電話、タブレット、ラップトップおよびデスクトップに対して 33.3%/66.6% の分割）：

Push と Pull - カラム順の変更

.small|medium|large-push-* と .small|medium|large-pull-* クラスで、 グリッドカラムの順序を変更します：

カラムのネスト

グリッドをネストすることができます（カラム内部のカラム）：

ミックス：モバイルとラップトップ/デスクトップ

Foundation グリッドシステムは、次の 3 つのクラスがあります：.small-* (携帯電話)、 .medium-* (タブレット) および .large-* (ラップトップ/デスクトップ)。 クラスは、より動的で柔軟なレイアウトを作成するために組み合わせることができます。

チップ: 各クラスはアップスケールなため、大型と小型に同じ幅を設定したい場合は、 .small-* を指定する必要があるだけです。

ミックス：モバイル、タブレットとラップトップ/デスクトップ

カラムのセンタリング

.small-centered クラスで、カラムを中央揃えにします。 中型と大型は、小型のセンタリングを継承しますが、.large-centered クラスで、大型デバイスだけのセンタリングも 指定することができます。

チップ: 大型画面で中央揃えにしないときは、.large-uncentered を使用します：

カラムのオフセット

カラムを右に移動するには、.large-offset-* (または .small-offset-*) クラスを使用します。 これらのクラスは、* カラムによってカラムの左マージンが増加します：

不完全な行

合計が 12 に満たない行がある場合、Foundation は自動的に右に最後の要素をフロートし、残りのスペースを埋めます。

オプションとして、要素を左にフロートするには、最後の要素に .end クラスを追加します：

ワイド画面

グリッド (.row) の最大幅は 62.5rem です。ワイド画面で、幅が 62.5rem 以上であるときは、 たとえ幅を 100% に設定しても、カラムはページの幅全体に広がることはありません。 しかし、新しい最大幅を設定することによって CSS でこれをオーバーライドすることができます：

デフォルトの最大幅を使用しているにもかかわらず、ページの幅全体に背景色を使用したい場合は、 .row の周りをコンテナ要素でラップし、望みの背景色を指定します：