W3.CSS 响应式网格

响应式网格

W3.CSS 支持 12 列响应式流体网格。

调整页面大小看看效果！

响应行

W3.CSS 的网格系统是响应式的。这些列将根据屏幕尺寸自动重新排列：在大屏幕上，将内容组织成三列可能看起来更好，但在小屏幕上，如果内容堆叠在一起可能会更好。

w3-col 有以下子类：

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

适用于中型屏幕（典型平板电脑）的列：

大屏幕的列（典型的笔记本电脑和台式机）：

可以组合上面的类来创建更加动态和灵活的布局。

每个类都会放大，所以如果你想为小、中、大屏幕设置相同的宽度，你只需要指定小的类。而如果你想在中、大屏幕上宽度相同，只需要指定medium类即可。

但是，如果您仅使用中型和/或大型类，则在小屏幕上宽度将始终转换为 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行：

w3 行填充：

使用 w3-rest

这个w3-休息class 是一个强大且灵活的类，它将使用网格列的剩余内容。

使用百分比

使用 CSS width 属性来确定列的特定宽度。