W3.CSS - 网格

W3.CSS网格 - 从简单和简单的步骤学习W3.CSS，从基本到高级概念，包括概述，环境设置，容器，代码着色，卡片，响应式设计，表格，按钮，工具提示，模态对话框，网格，表格，列表，图像，图标，颜色，导航，实用程序。

W3.CSS提供12列流体响应网格.

它使用w3-row和w3-col样式类分别定义行和列.

锶.不.	类名&描述
1	w3-row 指定用于响应列的无填充容器.此类必须使响应类完全响应.
2	w3-col 指定具有子类的列

锶.不.

类名&描述

w3-row

指定用于响应列的无填充容器.此类必须使响应类完全响应.

w3-col

指定具有子类的列

w3-col有几个子类用于不同类型的屏幕.

列小屏幕设备

以下是小屏幕设备(通常是智能手机)的列级样式列表.

锶.不.	类名&描述
1	s1 定义12列中的1列，宽度为08.33％.
2	s2 定义12列中的2列，宽度为16.66％.
3	s3 定义12列中的3列，宽度为25.00 ％.
4	s4 定义12列中的4列，宽度为33.33％.
5	s12 定义12列中的12列，宽度为100％.小屏幕手机的默认类别.

中型屏幕设备的列

以下是中型屏幕设备(通常是平板电脑)的列级样式列表.

<！ -->

锶.不.	类名&描述
1	m1 定义12列中的1列，宽度为08.33％.
2	m2 定义12列中的2列，宽度为16.66％.
3	m3 定义12列中的3列，宽度为25.00％.
4	m4 定义12列中的4列，宽度为33.33％.
5	m12 定义12列中的12列，宽度为100％.中型屏幕电话的默认类别.

大屏幕设备的列

以下是大屏幕设备(通常是笔记本电脑)的列级样式列表.

锶.不.	类名&描述
1	\| 1 定义12列中的1列，宽度为08.33％.
2	\| 2 定义12列中的2列，宽度为16.66％.
3	\| 3 定义12列中的3列宽度为25.00％.
4	\| 4 定义12列中的4列，宽度为33.33％.
5	\| 12 定义12列中的12列，宽度为100％.大屏幕设备的默认类.

用法

每个子类根据设备的类型确定要使用的网格的列数.请考虑以下HTML代码段.

         This text will use 2 columns on a small screen, 4 on a medium screen, and 3 on a large screen.

如果HTML元素的class属性中未提及子类，则设备上使用的默认列为12.

示例

w3css_grids.htm

         The W3.CSS Grids                                 Mobile First Design Demo
         Resize the window to see the effect!
                     1         2         3         4               5         6         7         8               9         10         11         12                                       This text will use 12 columns on a small screen, 4 on a medium screen (m4), and 3 on a large screen (l3).
                                    This text will use 4 columns on a small screen (s4), 8 on a medium screen (m8), and 9 on a large screen (l9).

结果

验证结果.

锶.不.	类名&描述
1	\| 1 定义12列中的1列，宽度为08.33％.
2	\| 2 定义12列中的2列，宽度为16.66％.
3	\| 3 定义12列中的3列宽度为25.00％.
4	\| 4 定义12列中的4列，宽度为33.33％.
5	\| 12 定义12列中的12列，宽度为100％.大屏幕设备的默认类.