財団グリッドの例
下に、私たちは共通のグリッドのいくつかの例を収集しています。
3つの等しい列
この例では、中規模および大規模な機器の3つの列を示し、小型デバイスで自動スタッキングを3つの等しい列（33.3％/ 33.3％/ 33.3％）を作成する方法を示します。
例
<DIVクラス=「中4列"スタイル="背景色：黄色; ">
<P> .medium-4 </ P>
</ DIV>
<DIVクラス=「中4列"スタイル="背景色：ピンク; ">
<P> .medium-4 </ P>
</ DIV>
<DIVクラス=「中4列"スタイル="背景色：黄色; ">
<P> .medium-4 </ P>
</ DIV>
</ DIV>
»をお試しください
三不等列
この例では、中規模および大規模な設備、小型デバイスでの自動スタック上の3つの列を示す3不等カラム（25％/ 50％/ 25％）を作成する方法を示します。
例
<DIVクラス=「中3の列"スタイル="背景色：黄色; ">
<P> .medium-3 </ P>
</ DIV>
<DIVクラス=「中6列"スタイル="背景色：ピンク; ">
<P> .medium-6 </ P>
</ DIV>
<DIVクラス=「中3の列"スタイル="背景色：黄色; ">
<P> .medium-3 </ P>
</ DIV>
</ DIV>
»をお試しください
2つの等しい列
この例では、常に50％/ 50％以上である2つの同等の列（50％/ 50％）、小、中、大規模な設備の割合を作成する方法を示します。
例
<DIVクラス= "小6列"スタイル= "背景色：黄色;">
<P> .small-6 </ P>
</ DIV>
<DIVクラス= "小6列"スタイル= "背景色：ピンク;">
<P> .small-6 </ P>
</ DIV>
</ DIV>
»をお試しください
等しくない2つの列
この例では、33.3％/ 66.6パーセントの上に常にある2不等カラム（33.3％/ 66.6パーセント）、小規模、中規模および大規模設備の割合を作成する方法を示します。
例
<DIVクラス= "小-8列"スタイル= "背景色：黄色;">
<P> .small-8 </ P>
</ DIV>
<DIVクラス= "小4列"スタイル= "背景色：ピンク;">
<P> .small-4 </ P>
</ DIV>
</ DIV>
»をお試しください
列の順序を変更します。
使用することで.small|medium|large-push-*と.small|medium|large-pull-*列の順序を変更するクラス：
例
<DIVクラス= "小4小8プッシュ列"スタイル= "背景色：黄色;">
<P> .small-4 .small- 8プッシュ</ P>
</ DIV>
<DIVクラス= "小8 、小4プル列"スタイル= "背景色：ピンク;">
<P> .small-8 .small- 4プルます。</ p>
</ DIV>
</ DIV>
»をお試しください
ネストした列
あなたは、ネストされたグリッド（列の挿入列）を使用することができます。
例
<DIVクラス= "小-8列"> .small-8
<DIVクラス = "行">
<DIVクラス= "小-8列"> .small-8ネストされました
<DIVクラス = "行">
<DIVクラス= "小-8列"> .small-8ネストされ再び</ DIV>
<DIVクラス= "小4列"> .small-4 </ DIV>
</ DIV>
</ DIV>
<DIVクラス= "小4列"> .small-4 </ DIV>
</ DIV>
</ DIV>
<DIVクラス= "小4列"> .small-4 </ DIV>
</ DIV>
»をお試しください
ミックス：モバイル、デスクトップ、
：財団グリッドシステムは、3つのカラムがあり.small-* （携帯電話）、 .medium-* （フラット）、および.large-* （デスクトップ）。 これらのクラスを動的に組み合わせて使用することができ、レイアウトをより柔軟にします。
ヒント：各クラスには、必要に応じて指定されるように小規模および大画面デバイスの幅を設定することができ、拡大することができます.small-* 。
例
<DIVクラス= "小6大8列"> .small-6 .large-8 </ DIV>
<DIVクラス= "小6大4列"> .small-6 .large-4 </ DIV>
</ DIV>
<DIVクラス = "行">
<DIVクラス= "小2大4列"> .small-2 .large-2 </ DIV>
<DIVクラス= "小4大4列"> .small-4 .large-2 </ DIV>
<DIVクラス= "小6大4列"> .small-6 .large-2 </ DIV>
</ DIV>
<DIVクラス = "行">
<DIVクラス= "小3大5列"> .small-3 .large-5 </ DIV>
<DIVクラス= "小9大7列"> .small-9 .large-7 </ DIV>
</ DIV>
»をお試しください
ミックス：モバイル、タブレットとデスクトップデバイス
例
<DIVクラス=「中6大8列"> .medium-6 .large-8 </ DIV>
<DIVクラス=「中6大4列"> .medium-6 .large-4 </ DIV>
</ DIV>
<DIVクラス = "行">
<DIVクラス= "小4 、中3大7列"> .small-4 .medium-3 .large-7 </ DIV>
<DIVクラス= "小4 、中6大3列"> .small-4 .medium-6 .large-3 </ DIV>
<DIVクラス= "小4 、中3大2列"> .small-4 .medium-3 .large-2 </ DIV>
</ DIV>
»をお試しください
中央の列
あなたは中央の列に使用できる.small-centeredクラスを。 中規模および大規模な設備が小型デバイスを中心に継承することができますが、クラスは大規模な設備を中心に設定する必要が.large-centered 。
例
<DIVクラス= "小4小中心列">小4小中心</ DIV>
</ DIV>
<DIVクラス = "行">
<DIVクラス= "小6 、小中心列">小6、小中心</ DIV>
</ DIV>
<DIVクラス = "行">
<DIVクラスは、= "小6大中心の列">小6大中心</ DIV>
</ DIV>
<DIVクラス = "行">
<DIVクラス= "小8小さな中心の大uncentered列">小-8小を中心とした大uncentered </ DIV>
</ DIV>
<DIVクラス = "行">
<DIVクラスは、= "小10小中心の列">小-10の小さな中心</ DIV>
</ DIV>
»をお試しください
列のオフセット
あなたが使用することができます.large-offset-* （または.small-offset-* ）クラスを、右の列を設定します。 アスタリスクを使用してコントロールの左余白に列の数：
例
<DIVクラス= "大-1列"> 1 </ DIV>
<DIVクラス= "大11列"> 11 </ DIV>
</ DIV>
<DIVクラス = "行">
<DIVクラス= "大-1列"> 1 </ DIV>
<DIVクラス= "大10大オフセット-1列"> 10は、1 </ div>のオフセット
</ DIV>
<DIVクラス = "行">
<DIVクラス= "大-1列"> 1 </ DIV>
<DIVクラス= "大9大オフセット-2列"> 9は、2 </ div>のオフセット
</ DIV>
<DIVクラス = "行">
<DIVクラス= "大-1列"> 1 </ DIV>
<DIVクラス= "大8大オフセット-3列"> 8は、3 </ div>のオフセット
</ DIV>
»をお試しください
不完全なコラム
12行の列番号場合とない、財団は自動的に右フロートへの最後の1、残りの列に記入する空白になります。
オプション.end左フロートへの最後の1セットの要素カテゴリ：
例
<DIVクラス=「中3の列"> .medium-3 </ DIV>
<DIVクラス=「中3の列"> .medium-3 </ DIV>
<DIVクラス=「中3の列"> .medium-3 </ DIV>
</ DIV>
<DIVクラス = "行">
<DIVクラス=「中3の列"> .medium-3 </ DIV>
<DIVクラス=「中3の列"> .medium-3 </ DIV>
<DIVクラス=「中3の列の最後"> .medium-3 .END </ DIV>
</ DIV>
ワイドスクリーン
グリッド（ .row ）最大サイズ（最大幅）が62.5remです。 ワイドスクリーンサイズに62.5remよりも大きくすることができる、この列は幅が100％に設定されている場合でも、ページを埋める完了しません。 しかし、我々はCSSを経由して新しい最大幅を設定することができます。
デフォルトの最大幅が、インターページ全体の背景色を使用する場合は、コンテナ要素に使用.rowクラス、そしてあなたは、背景色を指定する必要があります。
例
<DIVクラス = "行">
<DIVクラス= "小6列"スタイル= "背景色：黄色;"> .small-6 </ DIV>
<DIVクラス= "小6列"スタイル= "背景色：ピンク;"> .small-6 </ DIV>
</ DIV>
</ DIV>
»をお試しください