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