W3.CSS - 网格

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

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

先生。没有。 类名和描述
1

w3行

指定用于响应列的无填充容器。为了使响应类完全响应，该类是必需的。
2

w3-列

指定具有子类的列

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

米1

定义 12 列中的 1 列，宽度为 08.33%。
2

平方米

定义 12 列中的 2 列，宽度为 16.66%。
3

立方米

定义 12 列中的 3 列，宽度为 25.00%。
4

米4

定义 12 列中的 4 列，宽度为 33.33%。
5

米12

定义 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 片段。

<div class = "w3-row">
   <div class = "w3-col s2 m4 l3">
      <p>This text will use 2 columns on a small screen, 4 on a medium screen, and 3 on a large screen.</p>
   </div>
</div>

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

例子

w3css_grids.htm

现场演示 
<html>
   <head>
      <title>The W3.CSS Grids</title>
      <meta name = "viewport" content="width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>

   <body>
      <header class = "w3-container w3-teal">
         <h2>Mobile First Design Demo</h2>
         <p class = "w3-large">Resize the window to see the effect!</p>
      </header>
      <div class = "w3-row">
         <div class = "w3-col m1 w3-center w3-grey">1</div>
         <div class = "w3-col m1 w3-center">2</div>
         <div class = "w3-col m1 w3-center w3-grey">3</div>
         <div class = "w3-col m1 w3-center">4</div>
      
         <div class = "w3-col m1 w3-center w3-grey">5</div>
         <div class = "w3-col m1 w3-center">6</div>
         <div class = "w3-col m1 w3-center w3-grey">7</div>
         <div class = "w3-col m1 w3-center">8</div>
      
         <div class = "w3-col m1 w3-center w3-grey">9</div>
         <div class = "w3-col m1 w3-center">10</div>
         <div class = "w3-col m1 w3-center w3-grey">11</div>
         <div class = "w3-col m1 w3-center">12</div>
      </div>
      
      <div class = "w3-row">
         <div class = "w3-col w3-container m4 l3 w3-yellow">
            <p>This text will use 12 columns on a small screen, 4 on a medium screen (m4), and 3 on a large screen (l3).</p>
         </div>
      
         <div class = "w3-col w3-container s4 m8 l9">
            <p>This text will use 4 columns on a small screen (s4), 8 on a medium screen (m8), and 9 on a large screen (l9).</p>
         </div>
      </div>
   </body>
</html>

结果

验证结果。