Що таке гнучка сітка в адаптивної верстці?

Всім привіт! Сьогодні ми поговоримо про те, що таке grid systems (система сіток) або просто гнучкі сітки в адаптивної верстці.

Спочатку дамо визначення того, що таке Grid System.

Відео: Створення адаптивних сайтів

Grid System - колекція стилів, заснованих на класах, які дозволяють користувачеві контролювати макет сторінки, використовуючи систему рядків і колонок.

Зараз, я думаю, ви мало що зрозуміли, але далі я постараюся все вам роз`яснити.

Уявімо, що у нас є сторінка блогу. Вона розділена на 2 колонки: зліва основна частина, а праворуч - сайдбар. Давайте спробуємо створити гнучку сітку для такої сторінки.

Ну, для початку ми повинні зробити хоч і елементарну, але html розмітку.

id="Page"gt; 
class="Blog section"gt; 
class="Main"gt; 
class="Sidebar"gt;

Тут у нас є блок, який містить всю сторінку, в ньому лежить блок з блогом, в якому лежать 2 блоки: основна частина сторінки і сайдбар.

Отже, вся наша сторінка буде розміром 960px. Вся сітка розділена на 12 колонок по 69px. кожна. Частина для блогу буде шириною 900px. Основна частина сторінки буде 566px, сайдбар - 331px.

Ось, що ми отримаємо в результаті

#page { 
 margin:36pxauto- 
 width:960px- 
} 
 
.blog { 
 margin:0auto53px- 
 width:900px- 
} 
 
.blog .main { 
float: left- 
 width:566px- 
} 
 
.blog .sidebar { 
float: right- 
 width:331px- 
}

Все б добре, але, як ви можете бачити, все це статично, задано в пікселях. Ми ж хочемо, щоб наша сітка змінювала свої розміри в залежності від того, на якому екрані проглядається сторінка, отже, нам потрібно все поставити в відсотках. Давайте це і зробимо.

Для цього є все та ж формула, що і для шрифтів

мета / контекст = результат

Переведемо блок всієї сторінки з пікселів в відсотки.

#page { 
 margin:36pxauto- 
 width:90% - 
}

90% вибрано по тому, що в такому випадку у нас будуть ще й відступи по краях по 5%. Однак ви можете вибрати інше значення.

Йдемо далі і переведемо в відсотки блок з класом .blog.

Використовуємо нашу формулу: 900/960 = 0.9357

Помножимо результат на 100, щоб отримати відсотки, і пропишемо в наш css.

.blog { 
 margin:0auto53px- 
 width:93.75% - 
}

Те ж саме потрібно зробити і з колонками, але зауважте, що контекст змінився. Оскільки колонки знаходяться всередині блоку з класом .blog, то він і буде контекстом. Давайте порахуємо.

Відео: Toast Grid: огляд CSS-сітки

566 ÷ 900 = .628888889

331 ÷ 900 = .367777778

Переводимо все в відсотки і записуємо в таблицю стилів.

.blog .main { 
float: left- 
 width:62.8888889% - 
} 
 
.blog .sidebar { 
float: right- 
 width:36.7777778% - 
}

От і все! Тепер ми отримали гнучку сітку і можемо використовувати її при верстці.

Як бачите, все дуже просто. В основі гнучкої сітки, як і гнучкого шрифту, лежить все одна і та ж формула, запам`ятавши яку, ви зможете без проблем верстати адаптивні сайти.

Замітка! Як ви можете бачити, у нас вийшли досить довгі значення відсотків. Деякі можуть порадити вам округлити їх, але цього ні в якому разі робити не треба! Запам`ятайте!

А у мене на цьому все, спасибі за увагу і вдалою адаптивної верстки!

Поділися в соціальних мережах:

Схожі