敏感類
W3.CSS包括一個反應靈敏，移動第一網格系統來處理您的佈局：
1/2
1/2
1/3
1/3
1/3
1/3
2/3
1/4
1/4
1/4
1/4
1/2
1/4
1/4
2/3
1/3
3/4
1/4
1/4
1/4
1/2
1/4
1/2
1/4
50像素
休息
1/4
休息
100像素
×45像素
休息
W3.CSS的網格系統響應，列會自動重新安排取決於屏幕尺寸：
| 類 | 描述 |
|---|---|
| W3半 | 佔據了窗口的1/2（中等和大屏幕） |
| W3三分 | 佔據了窗口的1/3（中等和大屏幕） |
| W3-twothird | 佔據了窗口的2/3（中等和大屏幕） |
| W3季度 | 佔據了窗口的1/4（中等和大屏幕） |
| W3-threequarter | 佔據了窗口的3/4（中等和大屏幕） |
| W3-休息 | 定義的行的其餘部分 |
| W3-COL | 在12列響應流體網格（更多在後面的章節）定義的列 |
響應行
敏感類必須放在一個W3-行內是充分響應。
| 類 | 描述 |
|---|---|
| W3行 | 定義響應類的填充少容器。 |
| W3-行填充 | 定義響應班填充容器。 |
W3的半級
在W3半級的寬度是父元素（樣式=“WIDTH：50％”）的1/2。
在小屏幕上*它調整為100％。
W3半
W3半
例
<div class="w3-row">
<div class="w3-green w3-container w3-half">
<h2>w3-half</h2>
</div>
<div class="w3-container w3-half">
<h2>w3-half</h2>
</div>
</div> 試一試» 在W3-第三類
在W3-三等的寬度是父元素（樣式=“WIDTH：33.33％”）的1/3。
在小屏幕上*它調整為100％。
W3三分
W3三分
W3三分
使用W3-第三個例子
<div class="w3-row">
<div class="w3-green w3-container
w3-third">
<h2>w3-third</h2>
</div>
<div class="w3-container w3-third">
<h2>w3-third</h2>
</div>
<div class="w3-container w3-third">
<h2>w3-third</h2>
</div>
</div> 試一試» 在W3-twothird類
在W3-twothird類的寬度是父元素（樣式=“WIDTH：66.66％”）的2/3。
在小屏幕上*它調整為100％。
W3-twothird
W3三分
使用W3-第三個例子
<div class="w3-row">
<div class="w3-green w3-container
w3-third">
<h2>w3-twothird</h2>
</div>
<div class="w3-container w3-third">
<h2>w3-third</h2>
</div>
</div> 試一試» W3的季度級
W3的季度級的寬度是父元素（樣式=“WIDTH：25％”）的1/4。
在小屏幕上*它調整為100％。
W3季度
W3季度
W3季度
W3季度
使用W3季度例
<div class="w3-row">
<div class="w3-green w3-container
w3-quarter">
<h2>w3-quarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
</div> 試一試» 在W3-threequarter類
在W3-threequarter類的寬度是父元素（樣式=“WIDTH：75％”）的3/4。
在小屏幕上*它調整為100％。
W3季度
W3季度
使用W3-threequarter例
<div class="w3-row">
<div class="w3-green w3-container
w3-threequarter">
<h2>w3-threequarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
</div> 試一試» 組合
W3季度
W3半
W3季度
W3季度
W3季度
W3半
W3半
W3季度
W3季度
嵌套行
例如：W3半內W3一半
<div class="w3-row">
<div class="w3-half w3-container">
<h2>w3-half</h2>
<div class="w3-row">
<div class="w3-half w3-container w3-red">
<h2>w3-half</h2>
<p>This is a
paragraph.</p>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
<p>This is a
paragraph.</p>
</div>
</div>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
<div class="w3-row">
<div class="w3-half w3-container w3-red">
<h2>w3-half</h2>
<p>This is a
paragraph.</p>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
<p>This is a
paragraph.</p>
</div>
</div>
</div>
</div> 試一試» 列使用REST
我為150px
我休息
使用W3-REST示例
<div class="w3-row">
<div class="w3-col" style="width:150px"><p>150px</p></div>
<div class="w3-rest
w3-green"><p>rest</p></div>
</div> 試一試» 列使用百分比
20％
60％
20％
使用實例百分比
<div class="w3-row">
<div class="w3-col"
style="width:20%"><p>20%</p></div>
<div class="w3-col" style="width:60%"><p>60%</p></div>
<div
class="w3-col" style="width:20%"><p>20%</p></div>
</div> 試一試» W3的內容類
W3的內容類定義為固定大小為中心內容的容器：
W3-行和W3-行填充的區別
W3的行類定義了一個軟墊少的容器，而W3-行填充類增加了一個8像素左右填充到每一列：
W3行：
W3-行填充：
例
<div class="w3-row">
<div class="w3-col s4"><img src="img_lights.jpg"></div>
<div class="w3-col s4"><img src="img_nature.jpg"></div>
<div class="w3-col s4"><img src="img_fjords.jpg"></div>
</div>
<div class="w3-row-padding">
<div class="w3-col s4"><img src="img_lights.jpg"></div>
<div class="w3-col s4"><img src="img_nature.jpg"></div>
<div class="w3-col s4"><img src="img_fjords.jpg"></div>
</div> 試一試» 12列響應電網液
W3.CSS還支持先進的12列響應流體網格。
調整頁面大小，看看效果！
這部分將佔有相當大的屏幕上的一個小屏幕，4上的介質屏幕上12列，和3。
這部分將佔有相當大的屏幕上的一個小屏幕，8上的介質屏幕上12列，和9。
您將了解更多有關流體網格在後面的章節。
*屏幕分辨率
W3.CSS的內置響應使用一個屏幕的DP的大小。
W3.CSS將把一個iPhone 6的750點¯x1334像素的分辨率為375點¯x667像素的小屏幕。
小屏幕是小於601的像素的DP，介質屏幕是小於993的像素的DP。
下面是典型的設備分辨率列表，並報告DP大小：
iPhone 4
解析度
640×960
DP
320×480
iphone 5
解析度
640×1136
DP
320×528
iPhone 6
解析度
750點¯x1334
DP
375點¯x667
iPhone 6S
解析度
1080點¯x1920
DP
414點¯x736
銀河S6
解析度
1440點¯x2560
DP
360°×640
注4
解析度
1440點¯x2560
DP
400×853
的Nexus 6
解析度
1440點¯x2560
DP
411點¯x731
小型平板電腦
解析度
768×1024
DP
768×1024
iPad的
解析度
1536×2048
DP
728×1024
典型的筆記本電腦
解析度
1366 * 768
DP
1366 * 768
典型的桌面
解析度
1920×1080
DP
1920×1080