財団-グリッド

説明

Foundationグリッドシステムは、ページ全体で最大12列に拡大縮小します。グリッドシステムは、コンテンツを格納する一連の行と列を介してページレイアウトを作成するために使用されます。

グリッドオプション

次の表は、Foundationグリッドシステムが複数のデバイスでどのように機能するかを簡単に示しています。

	小型デバイス電話（<640px）	中型デバイスタブレット（> = 640px）	大型デバイスラップトップおよびデスクトップ（> = 1200px）
グリッドの動作	常に水平	ブレークポイントの上の水平方向に折りたたまれて開始	ブレークポイントの上の水平方向に折りたたまれて開始
クラスプレフィックス	。小さい-*	。中-*	。大-*
列の数	12	12	12
必要な	はい	はい	はい
オフセット	はい	はい	はい
列の順序	はい	はい	はい

基礎グリッドの基本構造

以下は、Foundationグリッドの基本構造です。

<div class = "row">
   <div class = "small-*"></div>
   <div class = "medium-*"></div>
   <div class = "large-*"></div>
</div>

<div class = "row">
   ...
</div>

• まず、行クラスを作成して、列の水平グループを作成します。

• コンテンツは列内に配置する必要があり、列のみが行の直接の子になることができます。

• グリッド列は、スパンする12個の使用可能な列の数を指定することによって作成されます。たとえば、4つの等しい列の場合、.large-3を使用します。

以下は、Foundationグリッドシステムで使用される3つのクラスです。

シニア番号	基本的なグリッドクラスと説明
1	大 大*クラスは大型の装置に使用されます。
2	中 中長期*クラスは、メディアデバイスに使用されます。
3	小さい small- *クラスは小型デバイスに使用されます。

高度なグリッド

以下は、Foundationで使用される高度なグリッド形式です。

シニア番号	高度なグリッドと説明
1	列/行の組み合わせ 列と行のクラスはコンテナとして使用する全幅列を取得するために同一の要素に使用されます。
2	ネスティング グリッド列を別の列の中にネストできます。
3	オフセット 使用した大offset- *または小offset- *クラスを、あなたは右に列を移動することができます。
4	不完全な行 行に12までの列が含まれていない場合、Foundationは最後の要素を自動的に右側にフロートさせます。
5	行を折りたたむ/折りたたまない メディアクエリサイズを使用して、折りたたみクラスと折りたたみ解除クラスが行要素に含まれ、パディングが表示されます。
6	中央の列 列の中央に小さいクラスを含めることで、列を中央に配置できます。
7	ソースの順序 ソース順序付けクラスは、ブレークポイント間で列をシフトするために使用されます。
8	ブロックグリッド ブロックグリッドは、コンテンツを分割するために使用されます。

セマンティックに構築する

SASSミックスインのセットを使用して、独自のセマンティックグリッドを構築するために使用されるグリッドCSSが生成されます。詳細については、ここをクリックしてください

SASSリファレンス

以下は、Foundationで使用されるグリッドのSASSリファレンスです。

シニア番号	基本的なグリッドと説明
1	変数 sass変数を使用して、このコンポーネントのデフォルトスタイルを変更できます。
2	Mixins 最終的なCSS出力は、ミックスインを使用してビルドされます。