W3.CSS レスポンシブ流動グリッド

レスポンシブ・グリッド

W3.CSS は、12 カラムのレスポンシブ・流動グリッドをサポートしています。

効果を確認するために、ページのサイズを変更してください!

レスポンシブ行

W3.CSS のグリッドシステムはレスポンシブで、画面サイズに応じてカラムは自動的に再配置されます： 大型画面では、3 カラムに編成したコンテンツの方がより良く見えるかもしれませんが、小型画面では、コンテンツ項目を互いの上に積み上げた方が より良く見えるかもしれません。

カラムは、完全にレスポンシブであるためには row 内部になければなりません。

w3-col には、次のサブクラスがあります：

小型画面用のカラム (代表：スマートフォン)：

中型画面用のカラム (代表：タブレット)：

大型画面用のカラム (代表：ラップトップ)：

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

各クラスは、アップスケールなため、小型、中型、大型画面にそれぞれ同じ幅を設定したい場合は、small クラスを 指定するのみで設定可能です。また、中型および大型画面で同じ幅にしたい場合には、中型クラスを指定するのみです。

しかし、中型と大型クラスの両方または何れか一方を使用する場合、小型画面では幅が 100% に変換されます。

注: カラム数は、それぞれの行ごとに、合計が常に 12 でなければなりません（6+6, 3+3+6, 9+3,など）！

2 つの幅の等しいカラム

すべての画面サイズ上の 2 つの等幅カラム（50%/50%）：

2 つの幅の異なるカラム

すべての画面サイズ上の 2 つの幅の異なるカラム（25%/75%）：

3 つの幅の等しいカラム

すべての画面サイズ上の 3 つの等幅カラム（33.3%/33.3%/33.3%）：

3 つの幅の異なるカラム

タブレット、ラップトップ、デスクトップ上では幅の異なるカラム（25％/ 50％/ 25％）。 携帯電話におけるカラムは、自動的にスタックされます（幅 100%）：

注: この例は、W3.CSS レスポンシブ で学習した w3-quarter (m3)、w3-half (m6)、w3-quarter (m3) を使用するのと同じです。

6 カラム

タブレット、ラップトップおよびデスクトップ上での幅の等しいカラム（各 16%）。 携帯電話におけるカラムは、自動的にスタックされます（幅 100%）：

ミックス：携帯とラップトップ

動的で柔軟なレイアウトを作成するために、クラスを組み合わせることができます。この例では、 大画面では 83.34%/16.66% (l8, l4) の分割、小型画面では 50%/50% (s6, s6) に分割した 2カラムのレイアウトを作成します：

ミックス： 携帯、タブレットとラップトップ

この例では、大画面では 25%/58.34%/16.66% (l3, l7, l2) の分割、中型画面では 50%/25%/25% (m6, m3, m3) の分割、 小型画面では 33.3%/33.3%/33.3% (s4, s4, s4) に分割した 3カラムのレイアウトを作成します：

w3-row と w3-row-padding の違い

w3-row クラスは、パディングなしのコンテナを定義し、w3-row-padding クラスは、各列の左右に 8px のパディングを追加します：

w3-row:

w3-row-padding:

w3-rest の使用

w3-rest クラスは、残ったグリッドカラムを使用する強力で柔軟なクラスです。

パーセントの使用

カラムを指定の幅に決定するためには、CSS の width プロパティを使用します。