<MyRusakov.ru />

Вёрстка сайта с нуля

Вёрстка сайта с нуля

Это уникальная информация по созданию страниц любой сложности. Вы узнаете всё, что нужно по HTML и CSS, а также увидите множество примеров по вёрстке страниц. А также почти к каждому уроку идут упражнения для закрепления материала, поэтому в отличном результате можете быть уверены! Пройдя данный курс, Вы сможете верстать страницы с любым по сложности дизайном. Помимо курса, Вы получите Бонус, который расскажет, как заработать на вёрстке сайтов.

Весь курс соткан из практических примеров реальной вёрстки. А также почти к каждому уроку идут упражнения для закрепления материала, поэтому в отличном результате можете быть уверены!

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Что такое гибкая сетка в адаптивной верстке?

Что такое гибкая сетка в адаптивной верстке?

Всем привет! Сегодня мы поговорим про то, что такое 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%;
}

Вот и все! Теперь мы получили гибкую сетку и можем использовать ее при верстке.

Как видите, все очень просто. В основе гибкой сетки, как и гибкого шрифта, лежит все одна и та же формула, запомнив которую, вы сможете без проблем верстать адаптивные сайты.

Заметка! Как вы можете видеть, у нас получились довольно длинные значения процентов. Некоторые могут посоветовать вам округлить их, но этого ни в коем случае делать не надо! Запомните!

А у меня на этом все, спасибо за внимание и удачной адаптивной верстки!

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (10):

And_Smi And_Smi 22.10.2014 14:02:46

Заметка! Как вы можете видеть, у нас получились довольно длинные значения процентов. Некоторые могут посоветовать вам округлить их, но этого ни в коем случае делать не надо! Запомните! А что будет, если округлить?

Ответить

alexandrdante alexandrdante 23.10.2014 00:11:48

ну,а вы попробуйте и увидите результат) уже выйдет кривая сетка)или где-то будет размер сверх адаптивности)

Ответить

DiabloTM DiabloTM 11.11.2014 23:39:24

And_Smi А что будет, если округлить? Просто статья перестала нести до конца смысловой нагрузки и была изменена чтобы контент был уникальным и текст, чтобы сайт (портал) индексировался поисковыми системами! Со слов первосточника Итана Маркотта - в книге Отзывчивый веб-дизайн написано следующее: Мы получили какое-то совсем некрасивое число. Может быть, самое некрасивое, которые вы сегодня видели. (Но подождите, эта глава еще не окончена.) Вам захочется округлить его до более-менее при- емлемого числа – скажем, 0,46 em. Даже не ду- майте! Может, ваши глаза и устанут смотреть на 0,458333333333333, но именно это число идеаль- но представляет желаемый кегль в пропорциональном отношении. К тому же браузеры мастерски владеют ис- кусством округления лишних десятичных знаков, когда преобразовывают значения в пиксели. Поэтому нужно дать им больше, а не меньше, и в конце вас будет ожи- дать отличный результат.

Ответить

maks0703 maks0703 22.10.2014 20:59:46

у класса .blog в ширине не задан знак %.

Ответить

DiabloTM DiabloTM 11.11.2014 23:00:09

Это придаст вашему сайту ещё большей адаптивности ещё 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-->

Ответить

Leha06607 Leha06607 03.12.2014 19:20:54

если ширина 960 , почему делим на 900 ?

Ответить

Maks4ever Maks4ever 29.12.2014 15:33:47

остальное идёт на отступы

Ответить

repochok202 repochok202 09.12.2014 20:44:36

хорошая статья

Ответить

Maks4ever Maks4ever 29.12.2014 15:19:47

не уверен что можно писать имена классов через пробел <div class="blog section">

Ответить

Nosferatv Nosferatv 21.05.2015 19:05:16

А я уверен что можно, а в некоторых случаях и нужно, особенно когда мы указываем не один класс, а несколько.

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.