W3.CSS Адаптивная гибкая сетка
Отзывчивая сетка
W3.CSS поддерживает адаптивную сетку из 12 столбцов.
Измените размер страницы, чтобы увидеть эффект!
Эта часть будет занимать 12 колонок на маленьком экране, 4 на среднем экране и 3 на большом экране.
Эта часть будет занимать 12 колонок на маленьком экране, 8 на среднем экране и 9 на большом экране.
Пример
<div class="w3-row">
<div class="w3-col m4 l3">
<p>12 columns on a small screen, 4
on a medium screen, and 3 on a large screen.</p>
</div>
<div class="w3-col m8 l9">
<p>12 columns on a small screen, 8
on a medium screen, and 9 on a large screen.</p>
</div>
</div>
Адаптивные строки
Система сетки W3.CSS отзывчива. Столбцы будут переупорядочиваться автоматически в зависимости от размера экрана: на большом экране может быть лучше, если содержимое будет организовано в три столбца, но на маленьком экране может быть лучше, если содержимое будет располагаться друг над другом.
| Класс | Описание |
|---|---|
| w3-ряд | Контейнер для адаптивных классов без заполнения |
| w3-заполнение строки | Контейнер для адаптивных классов с отступом 8 пикселей слева и справа. |
| w3-столбец | Определяет один столбец в адаптивной сетке из 12 столбцов. |
w3-col имеет следующие подклассы:
Колонки для маленьких экранов (типичные смартфоны):
| Класс | Описание |
|---|---|
| с1 | Определяет 1 из 12 столбцов (ширина: 08,33%) для небольших экранов. |
| с2 | Определяет 2 из 12 столбцов (ширина: 16,66%) для небольших экранов. |
| s3 | Определяет 3 из 12 столбцов (ширина: 25,00%) для небольших экранов. |
| s4 | Определяет 4 из 12 столбцов (ширина: 33,33%) для небольших экранов. |
| с5-с11 | |
| с12 | Определяет 12 из 12 столбцов (ширина: 100%). По умолчанию для маленьких экранов |
Колонки для средних экранов (типовые планшеты):
| Класс | Описание |
|---|---|
| м1 | Определяет 1 из 12 столбцов (ширина: 08,33%) для средних экранов. |
| м2 | Определяет 2 из 12 столбцов (ширина: 16,66%) для средних экранов. |
| м3 | Определяет 3 из 12 столбцов (ширина: 25,00%) для средних экранов. |
| m4 | Определяет 4 из 12 столбцов (ширина: 33,33%) для средних экранов. |
| м5-м11 | |
| м12 | Определяет 12 из 12 столбцов (ширина: 100%). По умолчанию для средних экранов |
Колонки для больших экранов (типичные ноутбуки и десктопы):
| Класс | Описание |
|---|---|
| л1 | Определяет 1 из 12 столбцов (ширина: 08,33%) для больших экранов. |
| л2 | Определяет 2 из 12 столбцов (ширина: 16,66%) для больших экранов. |
| л3 | Определяет 3 из 12 столбцов (ширина: 25,00%) для больших экранов. |
| л4 | Определяет 4 из 12 столбцов (ширина: 33,33%) для больших экранов. |
| л5-л11 | |
| л12 | Определяет 12 из 12 столбцов (ширина: 100%). По умолчанию для больших экранов) |
Приведенные выше классы можно комбинировать для создания более динамичных и гибких макетов.
Каждый класс масштабируется, поэтому, если вы хотите установить одинаковую ширину для маленьких, средних и больших экранов, вам нужно указать только малый класс. А если вы хотите, чтобы на средних и больших экранах была одинаковая ширина, вам нужно указать только средний класс.
Однако, если вы используете только средние и/или большие классы, ширина всегда будет преобразовываться в 100% на маленьких экранах.
Примечание . Количество столбцов в каждой строке всегда должно составлять 12 (6+6, 3+3+6, 9+3 и т. д.)!
Две равные колонки
Два столбца одинаковой ширины (50%/50%) на всех размерах экрана:
s6
s6
Пример
<div class="w3-row">
<div class="w3-col s6 w3-green w3-center"><p>s6</p></div>
<div class="w3-col
s6 w3-dark-grey w3-center"><p>s6</p></div>
</div>
Две неравные колонки
Два столбца разной ширины (25%/75%) на всех размерах экрана:
s3
с9
Пример
<div class="w3-row">
<div class="w3-col s3 w3-green w3-center"><p>s3</p></div>
<div class="w3-col
s9 w3-dark-grey w3-center"><p>s9</p></div>
</div>
Три равных столбца
Три столбца одинаковой ширины (33,3%/33,3%/33,3%) на всех размерах экрана:
s4
s4
s4
Пример
<div class="w3-row">
<div class="w3-col s4 w3-green w3-center"><p>s4</p></div>
<div class="w3-col s4 w3-dark-grey w3-center"><p>s4</p></div>
<div class="w3-col s4
w3-red w3-center"><p>s4</p></div>
</div>
Три неравных столбца
Три столбца разной ширины (25%/50%/25%) на планшетах, ноутбуках и настольных компьютерах. На мобильных телефонах столбцы автоматически складываются (ширина 100%):
м3
m6
м3
Пример
<div class="w3-row">
<div class="w3-col m3 w3-green w3-center"><p>m3</p></div>
<div class="w3-col
m6 w3-dark-grey w3-center"><p>m6</p></div>
<div class="w3-col
m3
w3-red w3-center"><p>m3</p></div>
</div>
Примечание. Этот пример аналогичен использованию w3-четверть (m3), w3-половина (m6), w3-четверть (m3), которые вы узнали в главе « Отзывчивый W3.CSS» .
Шесть столбцов
Шесть столбцов одинаковой ширины (по 16 %) на планшетах, ноутбуках и настольных компьютерах. На мобильных телефонах столбцы автоматически складываются (ширина 100%):
м2
м2
м2
м2
м2
м2
Пример
<div class="w3-row">
<div class="w3-col m2 w3-green
w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-red
w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-blue
w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-dark-grey
w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-black
w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-purple
w3-center"><p>m2</p></div>
</div>
Смешанный: мобильные и ноутбуки
Вы можете комбинировать классы для создания динамичного и гибкого макета. В этом примере будет создан макет из двух столбцов с разделением 83,34%/16,66% (l10, l2) на больших экранах и 50%/50% (s6, s6) на маленьких экранах:
l10 s6
л2 с6
Пример
<div class="w3-row">
<div class="w3-col l10 s6 w3-pink
w3-center"><p>l10 s6</p></div>
<div class="w3-col l2 s6
w3-dark-grey w3-center"><p>l2 s6</p></div>
</div>
Смешанный: мобильные устройства, планшеты и ноутбуки
В этом примере создается макет из трех столбцов с разделением 25%/58,34%/16,66% (l3, l7, l2) на больших экранах, 50%/25%/25% (m6, m3, m3) на средних экранах и 33,3%/33,3%/33,3% (s4, s4, s4) на маленьких экранах:
л3 м6 с4
l7 м3 s4
l2 м3 s4
Пример
<div class="w3-row">
<div class="w3-col l3 m6 s4 w3-green w3-center"><p>l3 m6 s4</p></div>
<div class="w3-col l7 m3 s4
w3-dark-grey w3-center"><p>l7 m3 s4</p></div>
<div class="w3-col l2
m3 s4 w3-red w3-center"><p>l2 m3 s4</p></div>
</div>
Разница между w3-row и w3-row-padding
Класс w3-row определяет контейнер без отступов, а класс w3-row-padding добавляет отступы по 8 пикселей слева и справа к каждому столбцу:
w3-ряд:
w3-ряд-заполнение:
Пример
<div class="w3-row">
<div class="w3-col s4"><img src="img_lights.jpg"></div>
<div class="w3-col s4"><img src="img_nature.jpg"></div>
<div class="w3-col s4"><img src="img_snowtops.jpg"></div>
</div>
<div class="w3-row-padding">
<div class="w3-col s4"><img src="img_lights.jpg"></div>
<div class="w3-col s4"><img src="img_nature.jpg"></div>
<div class="w3-col s4"><img src="img_snowtops.jpg"></div>
</div>
Использование w3-отдых
Класс w3-rest — это мощный и гибкий класс, который будет использовать то, что осталось от столбца сетки.
150 пикселей
отдых
75 пикселей
отдых
100 пикселей
100 пикселей
отдых
четверть
80 пикселей
отдых
четверть
четверть
четверть
35%
отдых
Пример использования отдыха
<div class="w3-row">
<div class="w3-col" style="width:150px"><p>150px</p></div>
<div class="w3-rest"><p>rest</p></div>
</div>
Элемент, использующий class="w3-rest" всегда должен быть последним элементом в исходном коде.
Использование процентов
Используйте свойство ширины CSS, чтобы определить конкретную ширину столбцов.
20%
60%
20%
45%
55%
15%
35%
10%
30%
10%
Пример
<div class="w3-row">
<div class="w3-col
w3-container w3-green"
style="width:20%"><p>20%</p></div>
<div
class="w3-col w3-container w3-blue" style="width:60%"><p>60%</p></div>
<div
class="w3-col w3-container w3-red" style="width:20%"><p>20%</p></div>
</div>