12-колоночна css-сітка
CSS-сітка (css-grid)
Сітка - розбиття сайту на колонки певної ширини. Сітка значно спрощує зробити сайт адаптивним.
Зазвичай використовують 12-колоночну сітку: об'єднуючи колонки можна легко отримати блоки з такими
ширинами:
- 50% - об'єднуємо 6 колонок;
- 33% - об'єднуємо 4 колонки;
- 25% - об'єднуємо 3 колонки;
- 16.6% - об'єднуємо 2 колонки.
Кожен блок теж розбивається на 12 умовних колонок. Таким чином можна, наприклад, зробити 8 колонок: спочатку блок розбиваємо на 2 колонки по 50%, після чого кожен з них - по 25% на 4 колонки.
Сітка дуже важлива для адаптації сайтів під різні розширення.
Та не всі дизайни можна нормально натягнути на сітку.
В наступному дизайні хоч і простежується сітка, проте, фон все портить, такий фон неможливо нормально зробити адаптивним.
Рядки та колонки
Розберемо як за допомогою CSS зробити сітку. Контент зазвичай огортається одним з наступних блоків:
.container { margin: 0 auto; width: 980px; }
.container-fluid { width: 100%; }
.container,
.container-fluid { padding: 0 16px 16px; }
Перший клас - для сайтів фіксованої ширини на десктопній версії сайту, другий - для сайту, що займає всю ширину екрана.
Фактично, це наш клас .resize.
Далі контент розбивається на строки, а строки в свою чергу - на колонки. Щось схоже на таблиці. Для цього нам знадобляться такі класи:
.row:after { content: ""; display: block; clear: both; }
.col-1 { float: left; width: 8.33333333%; }
.col-2 { float: left; width: 16.66666666%; }
.col-3 { float: left; width: 25%; }
.col-4 { float: left; width: 33.33333333%; }
.col-5 { float: left; width: 41.66666666%; }
.col-6 { float: left; width: 50%; }
.col-7 { float: left; width: 58.33333333%; }
.col-8 { float: left; width: 66.66666666%; }
.col-9 { float: left; width: 75%; }
.col-10 { float: left; width: 83.33333333%; }
.col-11 { float: left; width: 91.66666666%; }
.col-12 { float: left; width: 100%; }
Або більш оптимально:
.row:after { content: ""; display: block; clear: both; }
.col-1, .col-2, .col-3, ..., .col-11, .col-12 { float: left; }
.col-1 { width: 8.33333333%; }
.col-2 { width: 16.66666666%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33333333%; }
.col-5 { width: 41.66666666%; }
.col-6 { width: 50%; }
.col-7 { width: 58.33333333%; }
.col-8 { width: 66.66666666%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33333333%; }
.col-11 { width: 91.66666666%; }
.col-12 { width: 100%; }
Обережно можна використати шаблон:
.row:after { content: ""; display: block; clear: both; }
[class^="col-"], [class*=" col-"] { float: left; }
.col-1 { width: 8.33333333%; }
.col-2 { width: 16.66666666%; }
...
І тепер, щоб розбити головну частину сайту на 2 частини - контент і сайдбар, достатньо використати рядок і дві колонки:
<div class="row">
<aside class="col-4">
Бокова панель
</aside>
<main class="col-8>
Основний контент
</main>
</div>
Сума цифр в класах колонок не повинна перевищувати 12 (в ідеалі - дорівнювати цьому числу).
Горизонтальні відступи
Як правило, між колонками контенту мають бути відступи. Вони робляться хитрим образом:
.row { margin: 0 -16px; }
.col-* { padding: 0 16px; box-sizing: border-box; }
Така "магія" потрібна для того, щоб відступи між колонками завжди залишалася по 32 пікселя.
Увага! Через таку особливу комбінацію зовнішніх та внутрішніх відступів колонки можна вставляти тільки в рядки. В колонку можна вставити інший рядок. Рядки один в один вставляти не можна, колонки одну в одну - також не можна.
Правильно:
<div class="row">
<div class="col-8">
<div class="row">
<div class="col-6">...</div>
<div class="col-6">...</div>
...
Неправильно:
<div class="container-fluid">
<div class="container">
...
<div class="row">
<div class="row">
...
<div class="col-8">
<div class="col-4">...</div>
<div class="col-4">...</div>
...
Приклад верстки:
<div class="container-fluid">
<div class="row">
<section class="container">
<div class="row">
<aside class="col-4">
Сайдбар
</aside>
<main class="col-8">
<div class="row">
<div class="col-8">
<div class="row">
<div
class="col-6">Колонка 1</div>
<div
class="col-6">Колонка 2</div>
</div>
</div>
<div class="col-4">Бокова панелька</div>
</div>
</main>
</div>
</section>
</div>
</div>
Адаптивність
Нехай у нас на сайті є 12 блоків, розбиті на 4 колонки, при зменшенні ширини екрану необхідно перетворити спочатку на 3 колонки, потім на 2 і на невеликих екранах - на одну.
Для адаптації колонок будемо використовувати суфікси:
col-lg-* - десктопна версія (більше 1024 px);
col-md-* - версія для планшетів (820..1024 px);
col-sm-* - версія для смартфонів (481..819 px);
col-xs-* - версія для маленьких пристроїв (до 481 px);
Потрібно створити набір стилів:
.col-lg-* { width: ...; }
@media screen and (max-width: 1024px) {
.col-md-* { width: ...; }
}
@media screen and (max-width: 819px) {
.col-sm-* { width: ...; }
}
@media screen and (max-width: 480px) {
.col-xs-* { width: ...; }
}
HTML-код буде таким:
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">Колонка 1</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">Колонка 2</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">Колонка 3</div>
...
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">Колонка 9</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">Колонка 10</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">Колонка 11</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">Колонка 12</div>
</div>
Якщо нам потрібно, щоб на всіх версіях, окрім найменшої, зберігалося 4 колонки, то наступний код буде надлишковим:
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">Колонка 1</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">Колонка 2</div>
...
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">Колонка 12</div>
</div>
Проміжні класи можна сміливо видалити:
<div class="row">
<div class="col-lg-3 col-xs-12">Колонка 1</div>
<div class="col-lg-3 col-xs-12">Колонка 2</div>
...
<div class="col-lg-3 col-xs-12">Колонка 12</div>
</div>
Домашнє завдання
-
Зробіть адаптивну верстку сайту Minecraft, використовуючи CSS-сітку.
Почистіть стилі від зайвих класів.