グリッド財団 - 小型デバイス

25％および75％の幅の比、2、我々は小型デバイス上で簡単なグリッドレイアウトを持っていると仮定します。

ヒント：未満の小型のデバイスの画面を定義します40.0625em 。

私たちは、小型のデバイスを使用.small-*カテゴリを。

<div class="small-3 columns">....</div>
<div class="small-9 columns">....</div>

2列を設定する次の例は、比率は25％と75％であった（財団は、モバイル第一です：指定されていない場合は、大規模な設備が.smallクラスコードを継承します）： .smallそれらのものと使用を」。

<DIVクラス = "行">
<DIVクラス= "小3列"スタイル= "背景色：黄色;">
<P>？このチュートリアル</ P>
</ DIV>
<DIVクラス= "小9列"スタイル= "背景色：ピンク;">
<P>？このチュートリアル</ P>
</ DIV>
</ DIV>

	注：列の数は12まで追加することを確実にするために！

あなたは33.3％/ 66.6パーセント比を設定する必要がある場合は、使用することができます.small-4と.small-8

<DIVクラス = "行">
<DIVクラス= "小4列"スタイル= "背景色：黄色;">
<P>？このチュートリアル</ P>
</ DIV>
<DIVクラス= "小-8列"スタイル= "背景色：ピンク;">
<P>？このチュートリアル</ P>
</ DIV>
</ DIV>

Foundation コース