Що таке система сіток ? 

Модульна сітка це система розташування всіх елементів і блоків сайту. Це як якийсь каркас, який пронизує всі сторінки сайту і призводить все в візуальний порядок. Насправді існує кілька видів сіток в веб-дизайні: 

• Блокова сітка - це груба розмітка макета за допомогою блоків. 
• Колоночная сітка - за основу розмітки беруться колонки, рівні за своїми параметрами. 
• Модульна - складається з пересічних прямі (що направляють), які утворюють модулі.
• Ієрархічна - це вид, сітки в якому блоки розташовуються інтуїтивно, без будь-якої логічної структури. 

Модульная сітка bootstrap

Сітка зроблена з групування рядків і колонок всередині одного або декількох контейнерів.

Cітки на Bootstrap можуть використовуватися окремо, без Bootstrap JavaScript та інших CSS компонентів. Потрібно тільки завантажити і послатися на "bootstrap-grid.css", який включає в себе flexbox класи і класи для сітки.

Стандартні параметри сітки Bootstrap у форматі PSD:

Елементи сітки фреймворків Bootstrap 4 

Основними елементами сітки Bootstrap 3 і 4 є: 

• обгортковий контейнери - елементи з класом .container або .container-fluid; 
• ряди - елемент з класом row, який виконує ще функцію flex-контейнера; 
• адаптивні блоки - елементи, з одним або декількома класами col. 

Обгортковий контейнер - це перший елемент, з якого починається створення макета сторінки або деякої його самостійної частини. Його основне призначення - це встановити ширину макета, що розробляється . 

 У Bootstrap 4 є 2 типи контейнера: 

1.  контейнер .container призначений для створення адаптивно-фіксованого макета з фіксованою шириною, для центрування контейнера по середині шаблону, який масштабується адаптивно по ширині екрану, так що врешті-решт він може стати шириною на весь екран, як і .container-fluid, але на маленьких пристроях.

<div class="container"></div>

Ширина .container (max-width) буде залежати від різних розмірів екрану:

• Extra small <576px - 100%
• Small ≥576px - 540px
• Medium ≥768px - 720px
• Large ≥992px - 960px
• Extra large ≥1200px - 1140px

2.  контейнер .container-fluid для створення адаптивно-фіксованого макету характеризується тим, що він має умовно постійну ширину, яка на одних діапазонах viewport браузера має одне значення, а на дугих - інше

<div class="container-fluid"></div>

 Ряд row - це теж контейнер, але для адаптивних блоків сітки Bootstrap. У Bootstrap 4 його основна роль - це створити негативні відступи (margin) зліва і справа по 15px і також виконати функцію флекс-контейнера.

Адаптивний блок  .col - це елемент, який має адаптивну ширину. Тобто його ширина на одному діапазоні viewport може мати одне значення, а на іншому - інше. Установка поведінки адаптивного блоку здійснюється за допомогою одного або декількох класів col. 

Синтаксис класу col: 

col- {breakpoint} - {number_columns} 

{breakpoint} - це контрольна точка, яка визначає мінімальну ширину viewport, починаючи з якої цей клас буде діяти.

{Number_columns} - це ширина адаптивного блоку, яку він матиме, починаючи з цієї контрольної точки. Вказується ширина адаптивного блоку за допомогою колонок Bootstrap (цілого числа) за замовчуванням від 1 до 12. Це число визначає, яку частину ширини він матиме щодо блоку (елемента «ряд») який його містить. Мінімальна ширина адаптивного блоку - це 1/12 (8.3%), а максимальна - 12/12 (100%).

Адаптивні блоки в Bootstrap розташовуються лініями. В одну лінію можуть поміститися адаптивні блоки з сумарною кількістю колонок Bootstrap за замовчуванням не більше 12. Блоки, які не поміщаються в першу лінію, переносяться на наступну лінію і т.д.

В Bootstrap 4 - п'ять контрольних точок:

• смартфони - без позначення,
• планшети - sm, 
• ноутбуки - md, 
• десктопи - lg і xl

Контрольні точки наведені в порядку зростання ширини viewport, починаючи з якої вони починають діяти.

  Правила сітки:

• В контейнері .container чи .container-fluid розміщуються рядки сітки row.
• Колонки повинні бути прямими нащадками row 
• Не можна вставляти контент в рядок сітки row. Контент розміщується в колонках рядка row
• Колонки в рядку row називають класом  col
• Клас .row має по замовчуванню display: flex,  тому як нащадок в Flexbox, "колонка" в кожному рядку однієї і тієї ж висоти

Найпростіший приклад застосування сітки:

в одну колонку:

div class="container">
<div class="row">
<div class="col">I'm your content inside the grid!</div>
</div>
</div>

в дві колонки: 

<div class="container">
<div class="row">
<div class="col">Left column</div>
<div class="col">Right column</div>
</div>
</div>

в три колонки:

<div class="container">
<div class="row">
<div class="col">Left column</div>
<div class="col">Center column</div>
<div class="col">Right column</div>
</div>
</div>

Властивості колонок сітки:

• створюють горизонтальні розділителі по в'юпорту
• можуть мати різну ширину
• мають розкладку горизонтальну зліва направо і зверху вниз
• мають однокову  висоту з спорідненими колонками в тому ж рядку
• можуть рости і змешуватись по ширині

Класична сітка Bootstrap має 12 колонок:

колонки можуть бути рівномірно розподілені на 12 частин. Ось приклад, 6 колонок (12/6 = 2):

Основні правила створення макета за допомогою елементів сітки Bootstrap 

1. створити основні секції (наприклад: header, main, footer); 
2. створити всередині кожної секції обгортковий контейнер; 
3. помістити всередину кожного обгортковий контейнера, розмітку яких необхідно провести за допомогою адаптивних блоків, елЗавдання №емент «ряд»; 
4. створити всередині кожного ряду необхідну структуру за допомогою адаптивних блоків;
5. помістити всередину необхідних адаптивних блоків, розмітку яких необхідно провести за допомогою адаптивних блоків, елемент «ряд»; 
6. виконати пункт 5; 
7. виконувати пункти 6 та 7 до тих пір, поки не буде досягнута необхідна структура створюваного макета.

Завдання №1

Замінити клас "container" таким чином, щоб div розтягнувся на всю довжину. Використовуйте призначений клас для контейнерів Bootstrap 4. Решта коду залиште без змін.

See the Pen container-bs-exercises by kravets (@raisa69) on CodePen.

Завдання №2

See the Pen col-bs4-exersize by kravets (@raisa69) on CodePen.