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季度（M3），W3一半（M6），W3季度（M3），你在学W3.CSS响应篇章。

六列

六等宽列（各16％），在平板电脑，笔记本电脑和台式机。 在手机上，列会自动堆叠（100％的宽度）：

混合型：手机和笔记本电脑

您可以组合类来创建一个动态的，灵活的布局。 这个例子将产生在大屏幕上一83.34％/ 16.66％（18，14）分和50％/ 50％（S6，S6）分在小屏幕上的两列布局：

混合型：手机，平板电脑和笔记本电脑

这个例子将产生一个三列布局用25％/ 58.34％/ 16.66％（13，17，12）在大屏幕上分裂，50％/ 25％/ 25％（M6，M3，M3）上介质画面分割和在小屏幕上33.3％/ 33.3％/ 33.3％（S4，S4，S4）拆分：

W3-行和W3-行填充的区别

W3的行类定义了一个软垫少的容器，而W3-行填充类增加了一个8像素左右填充到每一列：

W3行：

W3-行填充：

使用百分比

使用W3-休息