阅读(2.6k) 书签赞(0) 我要纠错

W3.CSS Grid(网格)

2020-12-02 10:04 更新

这个部分将在一个小屏幕上占据12个柱子，在一个中屏幕上占据4个柱子，在一个大屏幕上占据3个柱子。

这部分将在一个小屏幕上占据12列，在一个中等屏幕上占8列，在一个大屏幕上占9列。

实例

<p>这个部分将在一个小屏幕上占据 12 个柱子，在一个中屏幕上占据 4 个柱子，在一个大屏幕上占据 3 个柱子.</p>

</div>

<p>这部分将在一个小屏幕上占据 12 列，在一个中等屏幕上占 8 列，在一个大屏幕上占 9 列.</p>

</div>

尝试一下 »

响应行

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

类	描述
w3-row	响应类的容器，无填充
w3-row-padding	响应类的容器，左右填充为 8px
w3-col	在 12 列响应式网格中定义一列

w3-col具有以下子类：

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

类	描述
s1	为小屏幕定义 12 列中的 1 列（宽度：08.33％）
s2	为小屏幕定义 12 列中的 2 列（宽度：16.66％）
s3	为小屏幕定义 12 列中的 3 列（宽度：25.00％）
s4	为小屏幕定义 12 列中的 4 列（宽度：33.33％）
s5-s11
s12	定义 12 列中的 12 列（宽度：100％）。小屏幕的默认设置

中型筛网（典型平板电脑）的列：

类	描述
m1	为中屏幕定义 12 列中的 1 列（宽度：08.33％）
m2	为中屏幕定义 12 列中的 2 列（宽度：16.66％）
m3	为中屏幕定义 12 列中的 3 列（宽度：25.00％）
m4	为中屏幕定义 12 列中的 4 列（宽度：33.33％）
m5 - m11
m12	定义 12 列中的 12 列（宽度：100％）。中屏幕的默认设置

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

类	描述
l1	为大屏幕定义 12 列中的 1 列（宽度：08.33％）
l2	为大屏幕定义 12 列中的 2 列（宽度：16.66％）
l3	为大屏幕定义 12 列中的 3 列（宽度：25.00％）
l4	为大屏幕定义 12 列中的 4 列（宽度：33.33％）
l5 - l11
l12	定义 12 列中的 12 列（宽度：100％）。大屏幕的默认设置

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

每个类别都会按比例增加，因此，如果您希望为小，中和大屏幕设置相同的宽度，则只需指定小类别。而且，如果您希望在中型和大型屏幕上使用相同的宽度，则只需指定中级类。

但是，如果仅使用中级和/或大型类，则在小屏幕上，宽度将始终转换为 100％。

注意：每行的列数总和应为 12（6 + 6、3 + 3 + 6、9 + 3等）！

两列相等

所有屏幕尺寸上的两个等宽列（50％/ 50％）：

50%

实例

</div>

</div>

尝试一下 »

两列不相等

在所有屏幕尺寸上，两列宽度不相等（25％/ 75％）：

25%

75%

实例

</div>

</div>

尝试一下 »

三列相等

所有屏幕尺寸上的三个等宽列（33.3％/ 33.3％/ 33.3％）：

33.3%

实例

</div>

</div>

</div>

尝试一下 »

三列不相等

平板电脑，笔记本电脑和台式机上的三个不同宽度的列（25％/ 50％/ 25％）。在手机上，这些列将自动堆叠（宽度为 100％）：

25%

50%

25%

实例

</div>

</div>

</div>

尝试一下 »

注意：此示例与使用 w3-quarter（m3），w3-half（m6），w3-quarter（m3）相同，您在 W3.CSS响应式一章中了解到。

六栏

平板电脑，笔记本电脑和台式机上有六个等宽的列（每个占 16％）。在手机上，这些列将自动堆叠（宽度为 100％）：

16%

实例

</div>

</div>

</div>

</div>

</div>

</div>

尝试一下 »

混合：手机和笔记本电脑

您可以结合使用类来创建动态灵活的布局。本示例将生成两列布局，在大屏幕上拆分为 83.34％/ 16.66％（l10，l2），在小屏幕上拆分为 50％/ 50％（s6，s6）：

83.34%

16.66%

实例

</div>

尝试一下 »

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

此示例将产生一个三列布局，其中大屏幕拆分为 25％/ 58.34％/ 16.66％（l3，l7，l2），中型屏幕拆分为 50％/ 25％/ 25％（m6，m3，m3），在小屏幕上分割为 33.3％/ 33.3％/ 33.3％（s4，s4，s4）：

25%

58.34%

16.66%

实例

</div>

尝试一下 »

w3-row 和 w3-row-padding 之间的区别

w3-row 类定义了一个无填充的容器，而 w3-row-padding 类向每列添加了 8px 的左右填充：

w3-row：

实例

</div>

</div>

</div>

尝试一下 »

使用 w3-rest

w3-rest 类是会用什么剩下的网格列的一个强大而灵活的类。

20%

80%

90%

10%

20%

60%

20%

25%

10%

40%

25%

20%

30%

实例

</div>

尝试一下 »

使用 class =“ w3-rest”的元素必须始终是源代码中的最后一个元素。

使用百分比

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

20%

60%

20%

45%

55%

15%

35%

10%

30%

10%

实例

</div>

尝试一下 »

以上内容是否对您有帮助：

← W3.CSS Tooltips (工具提示)

W3.CSS Code（代码） →

写笔记

我要补充

W3.CSS Grid(网格)

实例

响应行

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

中型筛网（典型平板电脑）的列：

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

两列相等

实例

两列不相等

实例

三列相等

实例

三列不相等

实例

六栏

实例

混合：手机和笔记本电脑

实例

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

实例

w3-row 和 w3-row-padding 之间的区别

实例

使用 w3-rest

实例

使用百分比

实例

推荐文章

推荐教程

推荐课程