W3.CSS応答性流体グリッド

応答グリッド

W3.CSSは12列応答性流体グリッドをサポートしています。

効果を確認するために、ページのサイズを変更！

応答行

W3.CSSのグリッドシステムが応答して、列が画面サイズに応じて自動的に再配置されます：それは3つの列に編成内容とのより良いに見えるかもしれません大きな画面ではなく、小さな画面では、コンテンツであれば良いだろう項目は、互いの上に積層しました。

列は完全に反応するように行の内側に存在する必要があります。

W3-COLは、以下のサブのクラスがあります。

小さな画面（典型的なスマートフォン）用カラム：

メディアスクリーン用の列（典型的な錠）：

大画面の列（典型的なラップトップ）：

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

各クラスには、アップスケールなので、あなたが小規模、中規模および大画面のために同じ幅を設定したい場合は、あなただけの小さなクラスを指定する必要があります。 あなたは中規模および大画面上で同じ幅をしたい場合や、あなただけのメディアクラスを指定する必要があります。

あなたが唯一の媒体および/または大規模なクラスを使用する場合は、幅が常に小さな画面上で100％に変換します。

注：列の数は、常にそれぞれの行（6 + 6、3 + 6 + 3、9 + 3、など）のために12まで追加する必要があります！

2つの等しい列

すべての画面サイズ上の2つの等幅の列（50％/ 50％）：

等しくない2つの列

すべての画面サイズに等しくない幅（25％/ 75％）の二つの列：

3つの等しい列

3つの等しい幅の列（33.3％/ 33.3％/ 33.3％）、すべての画面サイズに：

三不等列

三、様々な幅の列（25％/ 50％/ 25％）タブレット、ラップトップおよびデスクトップ上。 携帯電話では、列は自動的に（100％幅）をスタックします。

注：この例では、あなたが学習し、W3四半期（M3）、W3-半分（M6）、W3四半期（M3）を使用するのと同じですW3.CSS応答章。

6列

タブレット、ラップトップおよびデスクトップ上の六等幅の列（16％ずつ）。 携帯電話では、列は自動的に（100％幅）をスタックします。

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

あなたは、動的で柔軟なレイアウトを作成するためのクラスを組み合わせることができます。 この例では、大画面上の83.34パーセント/ 16.66パーセント（L8、L4）の分割や小さな画面上で50％/ 50％（S6、S6）分割して2列のレイアウトを生成します：

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

この例では、メディアの画面で大画面の25％/ 58.34パーセント/ 16.66パーセント（L3、L7、L2）の分割と3列レイアウト、50％/ 25％/ 25％（M6、M3、M3）の分割を生成し、小さな画面上で33.3％/ 33.3％/ 33.3％（S4、S4、S4）スプリット：

W3-行とW3-行パディングの違い

W3-行パディングクラスは、各列に8px左右のパディングを追加しながら、W3-行クラスは、パッド入りのレスコンテナを定義しています。

W3-行：

W3-行パディング：

パーセントを使用して

W3-残りの部分を使用して、