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

レスポンシブグリッド

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

ページのサイズを変更して効果を確認してください。

レスポンシブ行

W3.CSSのグリッドシステムは応答性があります。列は、画面サイズに応じて自動的に再配置されます。大画面では、コンテンツが3列に編成されている方が見栄えがよくなりますが、小さい画面では、コンテンツが互いに積み重ねられている方が見栄えがよくなります。

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

小さな画面（一般的なスマートフォン）の列：

ミディアムスクリーン（一般的なタブレット）のカラム：

大画面用の列（通常のラップトップおよびデスクトップ）：

上記のクラスを組み合わせて、より動的で柔軟なレイアウトを作成できます。

各クラスはスケールアップするため、小画面、中画面、大画面で同じ幅を設定する場合は、小クラスを指定するだけで済みます。また、中画面と大画面で同じ幅が必要な場合は、中クラスを指定するだけで済みます。

ただし、中規模および/または大規模のクラスのみを使用する場合、小さな画面では幅が常に100％に変換されます。

注：列の数は、行ごとに常に最大12になる必要があります（6 + 6、3 + 3 + 6、9 + 3など）。

2つの等しい列

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

2つの等しくない列

すべての画面サイズで幅が等しくない（25％/ 75％）2列：

3つの等しい列

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

3つの等しくない列

タブレット、ラップトップ、デスクトップの3つのさまざまな幅の列（25％/ 50％/ 25％）。携帯電話では、列は自動的にスタックされます（100％幅）。

注：この例は、 W3.CSSレスポンシブの章で学習したw3-quarter（m3）、w3-half（m6）、w3-quarter（m3）を使用した場合と同じです。

6列

タブレット、ラップトップ、デスクトップの6つの等しい幅の列（それぞれ16％）。携帯電話では、列は自動的にスタックされます（100％幅）。

混合：モバイルとラップトップ

クラスを組み合わせて、動的で柔軟なレイアウトを作成できます。この例では、大画面で83.34％/ 16.66％（l10、l2）が分割され、小画面で50％/ 50％（s6、s6）が分割された2列のレイアウトが生成されます。

混合：モバイル、タブレット、ラップトップ

この例では、25％/ 58.34％/ 16.66％（l3、l7、l2）が大画面で分割され、50％/ 25％/ 25％（m6、m3、m3）が中画面で分割された3列のレイアウトが生成されます。小さな画面で33.3％/ 33.3％/ 33.3％（s4、s4、s4）分割：

w3行とw3行のパディングの違い

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

w3-行：

w3-行パディング：

w3-restを使用する

w3-restクラスは、グリッド列の残りを使用する強力で柔軟なクラスです。

パーセントの使用

CSSのwidthプロパティを使用して、列の特定の幅を決定します。