W3.CSS響應流體網格

響應網格

W3.CSS支持12列響應流體網格。

調整頁面大小，看看效果！

響應行

W3.CSS的網格系統響應，列會自動重新安排取決於屏幕尺寸：在大屏幕可能看起來與分三路舉辦的內容更好，但在小屏幕上這將是，如果內容好物品被堆疊在彼此的頂部。

列必須位於一個行內，以充分回應。

W3-COL具有以下子類：

列小屏幕（典型智能手機）：

列中屏幕（典型片）：

列大屏幕（典型的筆記本電腦）：

這些類以上可以結合起來，創造出更多的活力和靈活的佈局。

每個類最高可擴展至，所以如果你想設置相同的寬度為小型，中型和大型屏幕，你只需要指定小班 。 如果你想在中型和大型屏幕的寬度相同，你只需要指定介質類。

但是，如果你只使用介質和/或大班，寬度總是會轉化為100％，在小屏幕上。

注意：列數應該總是加起來12的每一行（6 + 6,3 + 3 + 6,9 + 3，等等）！

兩個相等的列

兩個相等寬度列（50％/ 50％）在所有屏幕尺寸：

兩個不相等的列

寬度不等（25％/ 75％）在所有屏幕尺寸的兩列：

三等分列

三個相等寬度列（33.3％/ 33.3％/ 33.3％）在所有屏幕尺寸：

三個不平等列

三各種寬度的列（25％/ 50％/ 25％），在平板電腦，筆記本電腦和台式機。 在手機上，列會自動堆疊（100％的寬度）：

注意：這個例子是一樣的使用W3季度（M3），W3一半（M6），W3季度（M3），你在學W3.CSS響應篇章。

六列

六等寬列（各16％），在平板電腦，筆記本電腦和台式機。 在手機上，列會自動堆疊（100％的寬度）：

混合型：手機和筆記本電腦

您可以組合類來創建一個動態的，靈活的佈局。 這個例子將產生在大屏幕上一83.34％/ 16.66％（18，14）分和50％/ 50％（S6，S6）分在小屏幕上的兩列佈局：

混合型：手機，平板電腦和筆記本電腦

這個例子將產生一個三列佈局用25％/ 58.34％/ 16.66％（13，17，12）在大屏幕上分裂，50％/ 25％/ 25％（M6，M3，M3）上介質畫面分割和在小屏幕上33.3％/ 33.3％/ 33.3％（S4，S4，S4）拆分：

W3-行和W3-行填充的區別

W3的行類定義了一個軟墊少的容器，而W3-行填充類增加了一個8像素左右填充到每一列：

W3行：

W3-行填充：

使用百分比

使用W3-休息