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-quarter (m3)、w3-half (m6)、w3-quarter (m3) 相同，這些類在 W3.CSS 響應式章節中已經學過。

六列

在平板電腦、筆記型電腦和桌上型電腦上，六個等寬列（每列 16%）。在手機上，列會自動堆疊（100% 寬度）

混合：手機和筆記型電腦

您可以組合類來建立動態和靈活的佈局。此示例將在大螢幕上產生一個 83.34%/16.66% (l10, l2) 的雙列布局，在小螢幕上產生一個 50%/50% (s6, s6) 的分割。

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

此示例將在大螢幕上產生一個 25%/58.34%/16.66% (l3, l7, l2) 的三列布局，在中螢幕上產生一個 50%/25%/25% (m6, m3, m3) 的分割，在小螢幕上產生一個 33.3%/33.3%/33.3% (s4, s4, s4) 的分割。

w3-row 和 w3-row-padding 之間的區別

w3-row 類定義了一個無內邊距的容器，而 w3-row-padding 類為每列添加了 8px 的左右內邊距。

w3-row

w3-row-padding

使用 w3-rest

w3-rest 類是一個強大而靈活的類，它將使用網格列中剩餘的空間。

使用百分比

使用 CSS width 屬性來確定列的特定寬度。