Что такое гибкая сетка в адаптивной верстке?
Всем привет! Сегодня мы поговорим про то, что такое 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%;
}
Вот и все! Теперь мы получили гибкую сетку и можем использовать ее при верстке.
Как видите, все очень просто. В основе гибкой сетки, как и гибкого шрифта, лежит все одна и та же формула, запомнив которую, вы сможете без проблем верстать адаптивные сайты.
Заметка! Как вы можете видеть, у нас получились довольно длинные значения процентов. Некоторые могут посоветовать вам округлить их, но этого ни в коем случае делать не надо! Запомните!
А у меня на этом все, спасибо за внимание и удачной адаптивной верстки!
-
Создано 21.10.2014 20:25:59
-
Михаил Русаков
Комментарии (10):
Заметка! Как вы можете видеть, у нас получились довольно длинные значения процентов. Некоторые могут посоветовать вам округлить их, но этого ни в коем случае делать не надо! Запомните! А что будет, если округлить?
Ответить
ну,а вы попробуйте и увидите результат) уже выйдет кривая сетка)или где-то будет размер сверх адаптивности)
Ответить
And_Smi А что будет, если округлить? Просто статья перестала нести до конца смысловой нагрузки и была изменена чтобы контент был уникальным и текст, чтобы сайт (портал) индексировался поисковыми системами! Со слов первосточника Итана Маркотта - в книге Отзывчивый веб-дизайн написано следующее: Мы получили какое-то совсем некрасивое число. Может быть, самое некрасивое, которые вы сегодня видели. (Но подождите, эта глава еще не окончена.) Вам захочется округлить его до более-менее при- емлемого числа – скажем, 0,46 em. Даже не ду- майте! Может, ваши глаза и устанут смотреть на 0,458333333333333, но именно это число идеаль- но представляет желаемый кегль в пропорциональном отношении. К тому же браузеры мастерски владеют ис- кусством округления лишних десятичных знаков, когда преобразовывают значения в пиксели. Поэтому нужно дать им больше, а не меньше, и в конце вас будет ожи- дать отличный результат.
Ответить
у класса .blog в ширине не задан знак %.
Ответить
Это придаст вашему сайту ещё большей адаптивности ещё margin и padding адаптировать и можно собрать адаптивный дизайн спомните коробочную модель состоящая padd, marg, border приплюсуйте LESS чтобы код уменьшить в HTML ARIA для доступности в интернете для огранниченных людей и всё радуйтесь вёрсточкой конечно до bootstrapa 3 далеко но для понимания пойдет. /*Styles by DiabloTM*/ /*Adaptive*/ .wrapper{max-width:960px; margin:0 auto;} .wrapper .cols{float:left;} .wrapper .cols.col-1{width:8.333333333333333%;} .wrapper .cols.col-2{width:16.66666666666667%;} .wrapper .cols.col-3{width:25%;} .wrapper .cols.col-4{width:33.33333333333333%;} .wrapper .cols.col-5{width:41.66666666666667%;} .wrapper .cols.col-6{width:50%;} .wrapper .cols.col-7{width:58.33333333333333%;} .wrapper .cols.col-8{width:66.66666666666666%;} .wrapper .cols.col-9{width:75%;} .wrapper .cols.col-10{width:83.33333333333333%;} .wrapper .cols.col-11{width:91.66666666666666%;} .wrapper .cols.col-12{width:100%;} .row, .wrapper{overflow:hidden;} <!--Wrapper--> <div class="wrapper"> <div class="row"> <div class="cols col-12"> Ставте смотря сколько у вас в макете psd модульной сетки колонок. </div><!--/end .cols.col-12--> </div><!--/end .row--> </div><!--/end .wrapper--> <!--End Wrapper-->
Ответить
если ширина 960 , почему делим на 900 ?
Ответить
остальное идёт на отступы
Ответить
хорошая статья
Ответить
не уверен что можно писать имена классов через пробел <div class="blog section">
Ответить
А я уверен что можно, а в некоторых случаях и нужно, особенно когда мы указываем не один класс, а несколько.
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.