Итак, сейчас у нас есть 12 колонок. Ширина одной колонки 8,333% (100 / 12) .

Ширина.l-guest равна двум колонкам. Поэтому вам нужно умножить 8,333% на два. Достаточно просто. Проделайте тоже самое для остальных элементов.

Здесь я предлагаю использовать препроцессор типа Sass , который позволит вам рассчитывать ширину колонок легче, используя функцию percentage , вместо расчетов вручную:

L-guest-article {
@include clearfix;
.l-guest {
// Хм, читается лучше, чем 16.666% :)
width: percentage(2/12);
padding-left: 10px;
padding-right: 10px;
float: left;
} .l-main {
width: percentage(7/12);
padding-right: 10px;
padding-left: 10px; .grid-item {
padding-left: 10px;
padding-right: 10px;
float: left;
} .l-guest-article {
.l-guest {
width: percentage(2/12);
}
.l-main {
width: percentage(7/12);
}
.l-sidebar {
width: percentage(3/12);
}
}

Ну вот, теперь гораздо лучше 🙂

Шаг 8: создание вариаций раскладки

Последний шаг - сделать вашу раскладку адаптивной. Давайте предположим, что раскладка нашей гостевой статьи ведет себя следующим образом:

Разметка нашей гостевой статьи не должна меняться. То, что у нас есть - это самая доступная раскладка из возможных. Так что, изменения должны быть полностью в CSS .

При написании CSS для нашей адаптивной гостевой раскладки, я настоятельно рекомендую вам писать CSS сначала для мобильных , потому что это делает ваш код проще и аккуратнее. В первую очередь, мы можем начать писать CSS для мобильной раскладки.

L-guest-article {
.l-guest {
/* Здесь пусто */
}
.l-main {
margin-top: 20px;
}
.l-sidebar {
margin-top: 20px;
}
}

Нам здесь нечего делать, каждый компонент занимает всю доступную ширину по умолчанию. Однако мы можем добавить верхний отступ к последним двум элементам, чтобы отделить их друг от друга.

Давайте предположим, что для этой раскладки мы установим контрольную точку в 700 px . .l-guest должен занимать 4 из 12 колонок, а.l-main и.l-sidebar по 8 колонок каждый.

Здесь нам надо удалить свойство margin-top у.l-main , потому что он должен быть на одной линии с.l-guest .

Также, если мы установим.l-sidebar ширину 8 колонок, он автоматически перейдет во второй ряд - в первом ряду не хватит места. Поскольку он находится во втором ряду, нам тоже нужно добавить внешний отступ слева у.l-sidebar , чтобы протолкнуть его на позицию. В качестве альтернативы, мы можем сделать его обтекаемым справа - я так и сделаю, это не требует лишних расчётов.

И поскольку мы сделали наши грид-элементы обтекаемыми, грид-контейнер должен включать клиар-фикс, чтобы очистить обтекание у дочерних элементов:

L-guest-article {
@include clearfix;
.l-guest {
@media (min-width: 700px) {
width: percentage(4/12);
float: left;
}
}
.l-main {
margin-top: 20px;
@media (min-width: 700px) {
width: percentage(8/12);
margin-top: 0;
float: left;
}
}
.l-sidebar {
margin-top: 20px;
@media (min-width: 700px) {
width: percentage(8/12);
float: right;
}
}
}

Наконец, давайте перейдем к десктопной раскладке.

Допустим, для этой раскладки мы установим контрольную точку в 1200 px . .l-guest будет занимать 2 из 12 колонок, .l-main  - 7 из 12 и.l-sidebar  - 3 из 12.

Для этого мы создаем новое медиавыражение в рамках каждого элемента сетки и изменяем ширину по необходимости. Обратите внимание, что мы также должны удалить верхний отступ у.l-sidebar

L-guest-article {
@include clearfix;
.l-guest {
@media (min-width: 700px) {
width: percentage(4/12);
float: left;
} @media (min-width: 1200px) {
width: percentage(2/12);
}
}
.l-main {
margin-top: 20px;
@media (min-width: 700px) {
width: percentage(8/12);
margin-top: 0;
float: left;
}
@media (min-width: 1200px) {
width: percentage(7/12);
}
}
.l-sidebar {
margin-top: 20px;
@media (min-width: 700px) {
width: percentage(8/12);
float: right;
}
@media (min-width: 1200px) {
width: percentage(3/12);
margin-top: 0;
}
}
}

Вот CodePen с финальной раскладкой, которую мы создали:

О, кстати, вы можете добиться таких же результатов со Susy . Только не забудьте выставить gutter-position в inside-static .

Подводя итог

Ого. Длинная получилась статья. Я думал, трижды помру, пока писал её. Спасибо, что дочитали до конца. Надеюсь, вы не померли трижды, пока читали! 😛

Как вы могли заметить, в этой статье шаги для создания адаптивной сетки относительно простые. Большинство путается на шагах 5 (определение положения отступов) и 8 (адаптация раскладки).

5-й шаг прост, когда вы учитываете все возможные способы, и мы разобрали их вместе. 8-й шаг проходится легче, если у вас достаточно опыта в написании CSS сначала для мобильных .

Надеюсь, эта статья дала вам знания для построения вашей собственной адаптивной сетки, и я надеюсь увидеть как вы строите специально созданную сетку для вашего следующего проекта.

Когда дело доходит до выбора сетки появляется множество вариантов. Ниже приведены (и не только), которые вы свободно можете использовать в своих проектах. Эти CSS-сетки помогут вам быстро создать прекрасный отзывчивый сайт. В конце статьи приведена таблица, в которой сравниваются описанные ниже сетки.

1. Skeleton

Skeleton представляет собой набор css-файлов, плюс PSD-шаблон для веб-дизайнеров. Эти файла, по замыслу авторов Skeleton, помогут вам создать отзывчивый макет. Скелетон также имеет сброс стилей, что удобно. По умолчанию скелетон основан на 960px сетке (под мониторы шириной 980px), блоки скелетона имеют фиксированную ширину; блоки подстраиваются под браузер за счет пространства вокруг сайта; при изменении окна браузера горизонтальный скролл не появляется.

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

2. Simple Grid

Если вы минималист, то данная сетка вам подойдет. Ширина сетки по умолчанию не превышает 1140px . По утверждению авторов сетки делать сайт с меньшей максимальной шириной неправильно. В отличие от skeleton simplegrid ведет себя отзывчиво и удовлетворяет концепции отзывчивого дизайна. Как уже говорилось, максимальная ширина сетки 1140px , но поменять это значение не составит труда, так как все блоки сетки заданы в процентах: вот что значит отзывчивый дизайн! В самом сss-файле медиазапрос всего один:
@mediahandheld, onlyscreenand (max-width: 767px) , что можно отметить как недостаток.

В принципе вещь удобная, но при разработке, скорее всего, придется доработать.

Simple Grid является основой для легкой сетки, при этом Simple Grid не является CSS-фреймворком. У Simple Grid отсутствуют стили для кнопок, таблиц, шрифтов и т.д. Simple Grid работает с двумя различными типами сеток. Есть сетка для контента, которая выглядит как

Настройки Simple Grid

Основные настройки Simple Grid схожи с любой другой сеткой. Для начала необходимо обернуть вашу сетку в div с классом grid . Если вы хотите, чтобы у сетки был отступ (padding) в 20px , добавьте класс grid-pad . Затем, исходя из ваших предпочтений по размерам сетки, добавьте нужные классы. Например, если вы хотите сетку с левой колонкой и основным блоком (для контента), воспользуйтесь следующим кодом:

HTML

Если вы хотите получить с 4 колонками (для контента), вы можете использовать такой код:

HTML

Первая колонка (для контента) у нашей сетки всегда делается плавающей относительно левого края блока-обертки. Если вы хотите сделать колонку плавающей относительно правого края, добавьте класс push-right .

На основе Simple Grid работают, например, css-tricks..

Статьи в тему:

• перевод статьи "Don’t Overthink It Grids" на habrahabr.ru - Сетки без заморочек

3. Profound Grid

Profound grid позволяет предельно точно отобразить макет в большинстве браузерах. Как они смогли добиться такого прогресса для отзывчивого макета? Profound grid использует отрицательные поля при вычислении размеров столбцов.

4. Griddle

Griddle (github.com/necolas/griddle) – это сетка для веб-дизайнеров ориентированных на современные браузеры (IE8+). Css-файл генерируется при помощи sass-функций и примесей. Применение свойств inline-block и box-sizing обеспечивают макету новые возможности по сравнению с макетами основанными на плавающих блоках. Недостатки: у сетки отсутствует css-файл, только sass; скачать пример нельзя; только sass.

5. Extra Strength Responsive Grids

Если вы чувствуете, что другие css-сетки ограничивают вас, если ваш приоритет это полный контроль над тем, как ваш отзывчивый макет адаптируется под различные экраны, если вы озабочены о наименованиях классов в вашем css, то, возможно, вам пригодится Extra Strength Responsive Grids .

6. Proportional Grids

Это css решение решает проблему, очень часто возникающую при масштабировании нашего макета, а именно: возникающие непропорциональные размеры желобов для различных областей просмотра. Пропорциональные сетки позволяют использовать фиксированные размеры для ваших желобов, в то же время оставляя возможность использовать резиновые столбцы (колонки).

Идея автора такова: автор использует свойство box-sizing , что позволяет создать фиксированные промежутки совместно с колонками. Расстояние между колонками одно и то же для каждой конкретной точки останова и зависит от базового размера шрифта.

7. Neat

Описание появится позже

8. csswizardry-grids

Описание появится позже

9. Dead Simple Grid

Описание появится позже

10. Responsive Grid System

Описание появится позже

Добро пожаловать в "Дизайн-кладовку"!

Меня зовут Андрей Гаврилов, и я рад приветствовать вас в моем новом шоу необычного формата.

Почему такое странное название? Кладовка - это место, где собирается все, что накопил человек, что для него дорого и определяет его как личность.

Давайте вместе каждую неделю складывать в нашу общую дизайн-кладовку один полезный навык, секрет или умение.

Модульные сетки

Эта статья написана в формате конспекта по материалам данного видео:

Сегодня мы разберемся с одним важнейшим вопросом в работе современного веб-дизайнера. Это модульные сетки. Меня ежедневно заваливают вопросами о том, какую сетку использовать? В каких случаях использовать 12 колонок, 14 колонок, 1170рх или 960рх, а может быть, 940рх?

Сегодня мы разберем все эти вопросы в одном простом уроке.

Поехали...

Модульные сетки необходимы в работе веб-дизайнера для того, чтобы делать информацию на странице более структурированной и логично расположенной. Невозможно представить себе современную адаптивную страницу без модульной сетки. Поэтому ее использование является стандартом в работе веб-дизайнера. Существует очень много мнений, вопросов и непонятных моментов, которые пугают начинающих веб-дизайнеров, когда они приступают к работе с модульными сетками. Сегодня я постараюсь на все эти вопросы осветить.

Breakpoint

Первое, что нужно знать - это о таком понятии как breakpoint. Возможно, вы даже о нем и не слышали. Это, так называемая, точка слома. Она характеризует переход сайта от одного состояния к другому, потому как сайт выглядит по-разному на мобильном, планшете или десктопе. Для этого, как раз и существует та самая точка слома «breakpoint», в которой дизайн сайта переходит от мобильного устройства к планшету, от планшета к маленьким десктопам, от маленьких к большим.

Чтобы увидеть на примере, что такое breakpoint, и как работает адаптивность, можно открыть любой сайт, который является отзывчивым (адаптивным). Перед вами мой личный сайт andrewgavrilov.me, можете зайти на него и точно также протестировать. На моем десктопе с разрешением 1600рх, сайт выглядит именно так.

Давайте откроем dev tools в Chrome на мониторе. Если вы не знаете, как его запустить, то обязательно погуглите, так как мне бы не хотелось сейчас отвлекаться на такие базовые моменты. Итак, открываем dev tools и смотрим, как выглядит наш сайт на различных устройствах. Этот инструмент позволяет нам тестировать, как будет выглядеть сайт на мобильных устройствах с разрешением 320рх, 375рх в длину и т.д. На маленьких десктопах мой сайт выглядит вот так.

На планшетах 768рх, dev tools нам показывает, что сайт выглядит так.

На больших мобильных устройствах, с разрешением 420рх пикселей в длину, сайт перестраивается, и именно здесь, между двумя данными разрешениями и происходит breakpoint.

Поэтому вы сами решаете, сколько должно быть breakpoint у сайта и, соответственно, для каждого из состояний вы готовите макет. В этом нам помогают модульные сетки.

Bootstrap

Как правило, у сайта существуют всего лишь 2 или 3 breakpoint. Давайте заглянем на сайт самого популярного framework для разработчиков.

Это стало сегодня настолько популярным, что является, по сути, стандартом. Все разработчики и верстальщики работают именно под данный framework. Я не буду вдаваться в детали и рассказывать, что это такое, скажу только, что именно этот framework ускоряет верстку, и у него есть свои технические характеристики. Поэтому считается нормой, даже стандартом, если вы разрабатываете свой дизайн под модульные сетки, которые соответствуют Bootstrap.

Не пугайтесь, если вы не знали об этом, уже готовите какие-то макеты, и теперь вам придется верстать под Bootstrap. Любую сетку можно переделать под Bootstrap, переконфигурировать, и здесь есть отдельная вкладочка для этого. Первое, что вам нужно понять, даже если ваша сетка какая-то уникальная, ее всегда можно переделать под Bootstrap. Главное, чтобы верстальщик понимал, как это делать.

Перейдем на вкладку CSS и зайдем в раздел Grid System (колоночная система).

Здесь есть такая таблица, в которой рассказывается, какие диапазоны разрешений по умолчанию из коробки имеет Bootstrap. Скажем так, вы понимаете, что адаптивный сайт - это сайт, который одинаково хорошо отображается на всех мобильных, но, ввиду того, что мобильных устройств очень много и разрешение у всех разное готовить под каждый отдельный телефон макеты мы не можем. Поэтому мы берем диапазоны и готовим макет под каждый из них.

Bootstrap считает, что очень маленькие устройства - это телефоны с разрешением менее 768рх, поэтому в диапазоне от 0 до 768 мы готовим первый макет. Далее маленькие устройства - планшеты, у них разрешение больше, чем 768рх, но меньше, чем 992рх, далее от 992рх начинаются средние устройства (десктопы). А устройства, у которых разрешение больше, чем 1200рх считаются большими устройствами (большими десктопами).

Вот и получается, что для одного проекта мы готовим, в среднем, по 4 макета. Но скажу вам по секрету, что, чаще всего, хватает только трех - для мобильных, для планшетов и десктопов, где можно подготовить один макет, который будет открывать очень большие и обычные десктопы. Если мы понимаем, что готовим макеты под диапазоны, то под какую же конкретно величину нам делать макет, ведь фотошоп работает со статикой, это не динамическая графика. Поэтому необходимо четко знать какого размера будет наш макет.

Открою вторую тайну, которая вас успокоит - нет никаких норм. Если мы покрываем диапазон, к примеру, от 320рх до рх - вы сможете подготовить макет под 320рх, под 768рх, под 322рх, под 327рх.

Понимаете, в чем суть? Разницы нет никакой.

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

Для вас главное, чтобы ваш макет, длина холста которого примерно 480рх, попадал в диапазон, который покрывает данная конкретная сетка. В этой сетке уже можете работать как вам угодно. Кстати, для того, чтобы включить или выключить направляющие надо использовать комбинацию клавиш ctrl+H.

Направляющие формируют сетку, и вы сами можете их выдвигать, но поскольку это очень долго и неудобно, то проще всего скачивать такие шаблоны, которые я вам и предоставляю.

Вот шаблон для маленьких девайсов, которые больше, чем 768рх.

Средние устройства больше 992рх.

И большие, больше 1170рх.

Эту величину в макете я использую, что на 1170рх, что на 1200рх - неважно, потому что это ширина устройства, а не сетки. Т.е. сетка может быть любой под эту ширину устройства. Не заморачивайтесь и просто используйте эти сетки в своей работе.

Я использую, как правило, сетки extra small, small devices и large devices. Это три диапазона, которые я покрываю, и это две точки слома - переход от мобильных к планшетам, от планшетов к десктопам.

Думаю, что мы закрепили все, что касается модульных сеток, того, как они формируются и используются. Главное, не бойтесь использовать те, которые вам нравятся!

Работа с модульными сетками

Теперь второй момент - как работать с модульными сетками. Существует мнение, которого придерживаются многие, и которое держит в страхе начинающих дизайнеров - каждый элемент должен занимать четко определенное количество колонок, начинаться у одного края колонок, заканчиваться у другого - и только так. Если бы мы все делали наши дизайны такими, то они были бы скучными, однообразными и неинтересными. Именно поэтому сетка - это направляющий, подсказывающий, но ни в коем случае не диктующий вам условия элемент, и это важно понимать.

Основные принципы такие: здесь есть такой слой, который я иногда скрываю, иногда показываю, но чаще он скрыт.

Синие полосы - это колонки, мы работаем в них. Между ними есть промежутки, в которые мы не имеем права залазить. Но мы туда входим, и я покажу в какие моменты. Главное, чтобы наш элемент никогда не начинался между двумя колонками,

Его край не может начинаться внутри промежутка, только внутри колонки. Идеальное состояние, когда элемент начинается у края какой-нибудь колонки.

Если у вас так получается, то это прекрасно. Но чаще всего, элементы не всегда удается привязать к краю, и начинаются споры о сложности при верстке, дополнительных движениях в коде.

На самом деле, нет, это всего одна строка в коде, так что не переживайте, если ваш элемент начинается не у левого края колонки. Если и заканчивается он не у правого края колонки, то это тоже не беда. Просто можно постараться и "дотянуть" его, чтобы он закончился в пределах колонки.

Чтобы не быть голословным, я покажу небольшой пример, который снимет у вас большинство сомнений. Я подготовил стандартную картину, которую можно наблюдать в "шапке" любого сайта - логотип, строка с меню, телефон и любая кнопка.

Это расположение относительно модульной сетки абсолютно правильное. Здесь не совсем все идеально - меню оканчивается не у правого края колонки, телефон не начинается и не кончается у краев колонок, кнопка не доходит до края колонки. Представляете, если бы все использовали одинаковую сетку, и у всех была бы одинаковая длина элементов? Поэтому абсолютно нормально, когда у вас такая ситуация.

Проблема будет, если вы сделаете вот так:

Это уже не очень хорошо. Меню начинается в промежутке, телефон начинается в промежутке. Не проблема, что он заканчивается в промежутке, но вот что начинается там - это действительно проблема. Конечно, все это можно обыграть в верстке. Но это все равно неграмотно и непрофессионально. Следите, чтобы в вашей работе таких моментов не было.

Не стоит сильно заморачиваться по этому поводу, все придет с опытом. Просто многих пугает наличие модульной сетки, что надо трястись над каждым пикселем. Да, перфекционизм - это хорошая вещь в нашем деле, но не следует чересчур усердствовать в угоду модульным сеткам.

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

В заключение

Увидимся с вами через неделю, в новом видео, в новом выпуске "Дизайн-кладовки". А для того, чтобы я понимал, что вам нравится этот формат, насколько полезно это видео - ставьте пальчики вверх, подписывайтесь на канал и оставляйте свои комментарии. Тогда я буду знать, что вам интересно и буду отвечать на ваши вопросы.