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 属性来确定列的特定宽度。