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 Responsive 章节。

六列

平板电脑、笔记本电脑和台式机上的六个等宽列（每列 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类定义了一个padded-less容器，而w3-row-padding类为每一列添加了8px左右的padding:

w3-row:

w3-row-padding:

使用 w3-rest

w3-rest 类是一个强大而灵活的类，它将使用网格列的剩余部分。

使用百分比

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