W3.CSS предоставляет сетку с 12 колонками, реагирующими на жидкость.
Он использует классы стиля w3-row и w3-col для определения строк и столбцов соответственно.
| Старший | Имя класса и описание |
|---|---|
| 1 |
и3-строка Определяет контейнер без отступов, который будет использоваться для отзывчивых столбцов. Этот класс обязателен, чтобы адаптивные классы были полностью адаптивными. |
| 2 |
w3-цв Определяет столбец с подклассами |
и3-строка
Определяет контейнер без отступов, который будет использоваться для отзывчивых столбцов. Этот класс обязателен, чтобы адаптивные классы были полностью адаптивными.
w3-цв
Определяет столбец с подклассами
В w3-col есть несколько подклассов, предназначенных для разных типов экранов.
Колонны для небольших экранных устройств
Вот список стилей на уровне столбцов для небольших экранных устройств, как правило, смартфонов.
| Старший | Имя класса и описание |
|---|---|
| 1 |
s1 Определяет 1 из 12 столбцов с шириной 08,33%. |
| 2 |
s2 Определяет 2 из 12 столбцов с шириной 16,66%. |
| 3 |
s3 Определяет 3 из 12 столбцов с шириной 25,00%. |
| 4 |
s4 Определяет 4 из 12 столбцов с шириной 33,33%. |
| 5 |
s12 Определяет 12 из 12 столбцов с шириной 100%. Класс по умолчанию для телефонов с небольшим экраном. |
s1
Определяет 1 из 12 столбцов с шириной 08,33%.
s2
Определяет 2 из 12 столбцов с шириной 16,66%.
s3
Определяет 3 из 12 столбцов с шириной 25,00%.
s4
Определяет 4 из 12 столбцов с шириной 33,33%.
s12
Определяет 12 из 12 столбцов с шириной 100%. Класс по умолчанию для телефонов с небольшим экраном.
Колонки для средних экранов
Вот список стилей на уровне столбцов для устройств со средним экраном, обычно для планшетов.
| Старший | Имя класса и описание |
|---|---|
| 1 |
m1 Определяет 1 из 12 столбцов с шириной 08,33%. |
| 2 |
м2 Определяет 2 из 12 столбцов с шириной 16,66%. |
| 3 |
м3 Определяет 3 из 12 столбцов с шириной 25,00%. |
| 4 |
m4 Определяет 4 из 12 столбцов с шириной 33,33%. |
| 5 |
m12 Определяет 12 из 12 столбцов с шириной 100%. Класс по умолчанию для телефонов среднего размера. |
m1
Определяет 1 из 12 столбцов с шириной 08,33%.
м2
Определяет 2 из 12 столбцов с шириной 16,66%.
м3
Определяет 3 из 12 столбцов с шириной 25,00%.
m4
Определяет 4 из 12 столбцов с шириной 33,33%.
m12
Определяет 12 из 12 столбцов с шириной 100%. Класс по умолчанию для телефонов среднего размера.
Колонны для устройств с большим экраном
Вот список стилей на уровне столбцов для устройств с большим экраном, обычно для ноутбуков.
| Старший | Имя класса и описание |
|---|---|
| 1 |
| 1 Определяет 1 из 12 столбцов с шириной 08,33%. |
| 2 |
| 2 Определяет 2 из 12 столбцов с шириной 16,66%. |
| 3 |
| 3 Определяет 3 из 12 столбцов с шириной 25,00%. |
| 4 |
| 4 Определяет 4 из 12 столбцов с шириной 33,33%. |
| 5 |
| 12 Определяет 12 из 12 столбцов с шириной 100%. Класс по умолчанию для устройств с большим экраном. |
| 1
Определяет 1 из 12 столбцов с шириной 08,33%.
| 2
Определяет 2 из 12 столбцов с шириной 16,66%.
| 3
Определяет 3 из 12 столбцов с шириной 25,00%.
| 4
Определяет 4 из 12 столбцов с шириной 33,33%.
| 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>
Столбцы по умолчанию, которые будут использоваться на устройстве, равны 12, если подкласс не указан в атрибуте класса HTML-элемента.
пример
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>
Результат
Проверьте результат.