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 程式碼片段。

<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://w3schools.tw/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>

結果

驗證結果。

列印頁面