W3.CSS Адаптивна гнучка сітка
Адаптивна сітка
W3.CSS підтримує адаптивну гнучку сітку з 12 стовпцями.
Змініть розмір сторінки, щоб побачити ефект!
Ця частина займатиме 12 колонок на малому екрані, 4 на середньому екрані та 3 на великому екрані.
Ця частина займатиме 12 колонок на маленькому екрані, 8 на середньому екрані та 9 на великому екрані.
Приклад
<div class="w3-row">
<div class="w3-col m4 l3">
<p>12 колонок на малому екрані, 4 на середньому екрані та 3 на великому екрані.</p>
</div>
<div class="w3-col m8 l9">
<p>12 колонок на малому екрані, 8 на середньому екрані та 9 на великому екрані.</p>
</div>
</div>
Спробуйте самі »
Адаптивні рядки
Система сітки W3.CSS адаптивна. Стовпці автоматично змінюватимуться залежно від розміру екрана: на великому екрані може виглядати краще, коли вміст буде організовано в три стовпці, але на маленькому екрані буде краще, якщо вміст буде розміщено один над одним.
| Клас | Опис |
|---|---|
| w3-row | Контейнер для адаптивних класів без відступів |
| w3-row-padding | Контейнер для адаптивних класів із відступом 8 пікселів ліворуч і праворуч |
| w3-col | Визначає один стовпець у адаптивній сітці з 12 стовпців |
w3-col має наступні підкласи:
Колонки для маленьких екранів (типові смартфони):
| Клас | Опис |
|---|---|
| s1 | Визначає 1 із 12 стовпців (ширина: 08,33%) для маленьких екранів |
| s2 | Визначає 2 з 12 стовпців (ширина: 16,66%) для маленьких екранів |
| s3 | Визначає 3 з 12 стовпців (ширина: 25,00%) для маленьких екранів |
| s4 | Визначає 4 з 12 стовпців (ширина: 33,33%) для маленьких екранів |
| s5-s11 | |
| s12 | Визначає 12 із 12 стовпців (ширина: 100%). За замовчуванням для маленьких екранів |
Колонки для середніх екранів (типові планшети):
| Клас | Опис |
|---|---|
| m1 | Визначає 1 із 12 стовпців (ширина: 08,33%) для середніх екранів |
| m2 | Визначає 2 з 12 стовпців (ширина: 16,66%) для середніх екранів |
| m3 | Визначає 3 із 12 стовпців (ширина: 25,00%) для середніх екранів |
| m4 | Визначає 4 з 12 стовпців (ширина: 33,33%) для середніх екранів |
| m5-m11 | |
| m12 | Визначає 12 із 12 стовпців (ширина: 100%). За замовчуванням для середніх екранів |
Колонки для великих екранів (типові ноутбуки та настільні ПК):
| Клас | Опис |
|---|---|
| l1 | Визначає 1 із 12 стовпців (ширина: 08,33%) для великих екранів |
| l2 | Визначає 2 з 12 стовпців (ширина: 16,66%) для великих екранів |
| l3 | Визначає 3 з 12 стовпців (ширина: 25,00%) для великих екранів |
| l4 | Визначає 4 з 12 стовпців (ширина: 33,33%) для великих екранів |
| l5-l11 | |
| l12 | Визначає 12 із 12 стовпців (ширина: 100%). За замовчуванням для великих екранів) |
Наведені вище класи можна комбінувати для створення більш динамічних і гнучких макетів.
Кожен клас масштабується, тому, якщо ви бажаєте встановити однакову ширину для малих, середніх і великих екранів, вам потрібно лише вказати клас small. І якщо ви бажаєте однакову ширину на середніх і великих екранах, вам потрібно лише вказати середній клас.
Однак, якщо ви використовуєте лише середні та/або великі класи, ширина завжди перетворюватиметься на 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
s9
Приклад
<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% ширини):
m3
m6
m3
Приклад
<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-quarter (m3), w3-half (m6), w3-quarter (m3), які ви вивчали в розділі W3.CSS Адаптивний.
Шість стовпців
Шість колонок однакової ширини (16% кожна) на планшетах, ноутбуках і настільних комп’ютерах. На мобільних телефонах стовпці складатимуться автоматично (100% ширини):
m2
m2
m2
m2
m2
m2
Приклад
<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
l2 s6
Приклад
<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) на малих екранах:
l3 m6 s4
l7 m3 s4
l2 m3 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-row:
w3-row-padding:
Приклад
<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-rest
Клас w3-rest — це потужний і гнучкий клас, який використовуватиме те, що залишилося від стовпця сітки.
150px
rest
75px
rest
100px
100px
rest
quarter
80px
rest
quarter
quarter
quarter
35%
rest
Приклад використання rest
<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 властивість width, щоб визначити конкретну ширину стовпців.
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>
Спробуйте самі »
