W3.CSS-グリッド
W3.CSSは、12列の流体応答グリッドを提供します。
w3-rowスタイルクラスとw3-colスタイルクラスを使用して、それぞれ行と列を定義します。
| シニア番号 | クラス名と説明 |
|---|---|
| 1 | w3-row レスポンシブ列に使用するパディングのないコンテナーを指定します。このクラスは、レスポンシブクラスが完全にレスポンシブであるために必須です。 |
| 2 | w3-col サブクラスを持つ列を指定します |
w3-colには、さまざまなタイプの画面用のサブクラスがいくつかあります。
小画面デバイスの列
これは、小さな画面のデバイス（通常はスマートフォン）の列レベルのスタイルのリストです。
| シニア番号 | クラス名と説明 |
|---|---|
| 1 | s1 幅が08.33％の12列のうちの1つを定義します。 |
| 2 | s2 幅が16.66％の12列のうち2列を定義します。 |
| 3 | s3 幅が25.00％の12列のうち3列を定義します。 |
| 4 | s4 幅が33.33％の12列のうち4列を定義します。 |
| 5 | s12 幅が100％の12列のうち12列を定義します。小画面電話のデフォルトクラス。 |
中画面デバイスの列
これは、中画面デバイス（通常はタブレット）の列レベルのスタイルのリストです。
| シニア番号 | クラス名と説明 |
|---|---|
| 1 | m1 幅が08.33％の12列のうちの1つを定義します。 |
| 2 | m2 幅が16.66％の12列のうち2列を定義します。 |
| 3 | m3 幅が25.00％の12列のうち3列を定義します。 |
| 4 | m4 幅が33.33％の12列のうち4列を定義します。 |
| 5 | m12 幅が100％の12列のうち12列を定義します。中画面電話のデフォルトクラス。 |
大画面デバイスの列
これは、大画面デバイス（通常はラップトップ）の列レベルのスタイルのリストです。
| シニア番号 | クラス名と説明 |
|---|---|
| 1 | |1 幅が08.33％の12列のうちの1つを定義します。 |
| 2 | |2 幅が16.66％の12列のうち2列を定義します。 |
| 3 | |3 幅が25.00％の12列のうち3列を定義します。 |
| 4 | |4 幅が33.33％の12列のうち4列を定義します。 |
| 5 | |12 幅が100％の12列のうち12列を定義します。大画面デバイスのデフォルトクラス。 |
使用法
各サブクラスは、デバイスのタイプに基づいて使用されるグリッドの列数を決定します。次の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>結果
結果を確認します。