Всем привет! Сегодня поговорим про то, что такое grid systems(система сеток) или просто гибкие сетки в адаптивной верстке .
Всем привет! Сегодня поговорим про то, что такое grid systems(система сеток) или просто гибкие сетки в адаптивной верстке.
Сначала дадим определение тому, что такое Grid System.
Grid System - коллекция стилей, основанных на классах, которые позволяют пользователю контролировать макет страницы, используя систему строк и колонок.
Сейчас, я думаю, вы мало что поняли, но дальше я постараюсь все вам разъяснить.
Представим, что у нас есть страница блога. Она разделена на 2 колонки: слева основная часть, а справа - сайдбар. Давайте попробуем создать гибкую сетку для такой страницы.
Ну, для начала мы должны сделать хоть и элементарную, но html разметку.
<div id="page">
<div class="blog section">
<div class="main"></div>
<div class="sidebar"></div>
</div>
</div>
Здесь у нас есть блок, который содержит всю страницу, в нем лежит блок с блогом, в котором лежат 2 блока: основная часть страницы и сайдбар.
Итак, вся наша страница будет размером 960px. Вся сетка разделена на 12 колонок по 69px. каждая. Часть для блога будет шириной 900px. Основная часть страницы будет 566px, сайдбар - 331px.
Вот, что мы получим в итоге
#page {
margin: 36px auto;
width: 960px;
}
.blog {
margin: 0 auto 53px;
width: 900px;
}
.blog .main {
float: left;
width: 566px;
}
.blog .sidebar {
float: right;
width: 331px;
}
Все бы хорошо, но, как вы можете видеть, все это статично, задано в пикселях. Мы же хотим, чтобы наша сетка меняла свои размеры в зависимости от того, на каком экране просматривается страница, следовательно, нам нужно все задать в процентах. Давайте это и сделаем.
Для этого есть все та же формула, что и для шрифтов
цель / контекст = результат
Переведем блок всей страницы из пикселей в проценты.
#page {
margin: 36px auto;
width: 90%;
}
90% выбрано по тому, что в таком случае у нас будут еще и отступы по краям по 5%. Однако вы можете выбрать другое значение.
Идем дальше и переведем в проценты блок с классом .blog.
Используем нашу формулу: 900 / 960 = 0.9357
Умножим результат на 100, чтобы получить проценты, и пропишем в наш css.
.blog {
margin: 0 auto 53px;
width: 93.75%;
}
То же самое нужно сделать и с колонками, но заметьте, что контекст изменился. Т.к. колонки находятся внутри блока с классом .blog, то он и будет контекстом. Давайте посчитаем.
566 ÷ 900 = .628888889
331 ÷ 900 = .367777778
Переводим все в проценты и записываем в таблицу стилей.
.blog .main {
float: left;
width: 62.8888889%;
}
.blog .sidebar {
float: right;
width: 36.7777778%;
}
Вот и все! Теперь мы получили гибкую сетку и можем использовать ее при верстке.
Как видите, все очень просто. В основе гибкой сетки, как и гибкого шрифта, лежит все одна и та же формула, запомнив которую, вы сможете без проблем верстать адаптивные сайты.
Заметка! Как вы можете видеть, у нас получились довольно длинные значения процентов. Некоторые могут посоветовать вам округлить их, но этого ни в коем случае делать не надо! Запомните!
А у меня на этом все, спасибо за внимание и удачной адаптивной верстки!
