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

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

Структура сетки может быть самой разной. Печатные и онлайн-издания разрабатывают свои сетки, которые повторяются из номера в номер и со страницы на страницу, придавая источнику свой уникальный визуальный стиль. В вебе стала популярной сетка из 12 колонок, в основном благодаря ее реализации в bootstrap.

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

Известный верстальщик Игорь Штанг любит повторять мантру «сначала структура, потом сетка». То есть дизайн — это всегда нечто большее, чем ровно стоящие блоки. Важно определиться с содержимым, порядком, акцентами, пропорциями, относительными размерами и размещением, и только когда все эти дизайнерские задачи решены, можно включить направляющие сетки и скорректировать расположение модулей, чтобы макет стал ровнее. При этом не нужно сильно искажать модули в угоду сетке: содержимое и идея важнее. Если после выравнивания что-то встало некрасиво, то лучше «подвинуть» сетку, чем контент.

Сетки в вебе

У веб-страниц есть особенность: размер макета заранее неизвестен, страница адаптируется под разные размеры экранов. Сетка при этом может сохраняться, изменяя свои размеры пропорционально размеру экрана (такие страницы называют «резиновыми» или responsive), или же можно спроектировать несколько сеток, которые будут сменять друг друга при отображении на устройствах с разными размерами экрана (страницы, использующие такой подход, называют адаптивными, adaptive). Подходы не являются взаимоисключающими, большинство страниц в современном вебе и responsive, и adaptive одновременно.

Адаптивность, как правило, заключается в пошаговом уменьшении количества колонок с контентом, или вообще просто «разворачивании»: то, что было колонками на десктопе,  становится обычными блоками, стоящими друг за другом по вертикали.

Можно придумать и другие, более сложные способы адаптации страницы к маленьким экранам, когда одна сетка меняется альтернативной — но такие решения  в каждом случае придется реализовывать в коде.

Другая важная особенность веб-страниц: заранее неизвестен не только размер макета, но и содержимое (у полиграфистов от этого сразу взрывается голова). Текст и картинки на странице могут создаваться пользователями или контент-менеджером, и никто не скажет наперед, какими они будут. Сетка же в таких условиях должна «держать удар» — вмещать картинки разных пропорций и текст произвольного объема, чтобы при этом страница оставалась визуально привлекательной, ничего не разъезжалось и модули не наползали друг на друга. Решение этой задачи — ответственность дизайнера, а не верстальщика: важно спроектировать такую структуру из модулей, которая сможет правильно вмещать контент, а реализация хорошо придуманной сетки в коде не должна быть супер-сложной.

Сетки на CSS

Существует много способов реализовать модульную сетку с помощью CSS. Некоторые из подходов позволяют только разбить строку на колонки (а большего в 95% макетов и не нужно), другие — создать полноценную сетку со сложным расположением модулей. Подходы не взаимоисключающие, их все можно использовать в разных частях сайта или даже одного макета — нужно лишь организовать правила таким образом, чтобы они не пересекались и не рушили друг друга.

Колоночная система — это набор презентационных (не связанных с семантикой) CSS-классов, которые используются везде, где нужно разбить макет на адаптивные колонки. Презентационные классы — это, конечно, совсем неправильно, не семантично и вообще фу, но в случае с колонками это «необходимое зло» — без них пришлось бы для каждого случая писать CSS-код, и не по одному правилу, а для всех размеров экранов, для которых предусмотрена адаптация, что гораздо медленнее в реализации, и в результате выливается в больший объем кода, а следовательно и с большим числом потенциальных ошибок.

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

Все примеры ниже написаны на scss.

Структуру разметки будем использовать такую (почти как в бутстрапе):

Колонки с помощью inline-block

Тут стоит обратить внимание на свойство font-size: 0. Это своего рода хак, который убирает пробелы между колонками. Если этого не сделать, две колонки с шириной по 50% не войдут в строку: между ними появится пробел. Это не баг браузера, а правильное поведение: любые пробельные символы между строчными элементами в разметке отображаются на странице как пробелы

Плюсы: инлайн-блоки можно по-разному выравнивать по вертикали. Ширина может зависеть от содержимого, если задать width:auto, и поиграться с min-width и max-width. Минусы: порядок блоков поменять нельзя.

Колонки с помощью float

Очень популярное решение, сетка bootstrap была создана на float-колонках.

Плюсы: простая реализация. С помощью класса col-right можно немного варьировать порядок колонок в коде и на странице (иногда приходится). Минусы: колонки выравниваются только по верхнему краю, высота всегда зависит от содержимого.

Flexbox

Flexbox — гораздо более современное решение со множеством достоинств. При использовании в качестве колоночной системы, flexbox-колонки автоматически растягиваются на одинаковую высоту (по высоте самой длинной колонки) — иногда дизайн-макеты предусматривают одинаковую высоту модулей, особенно если границы модулей видны.

Дополнительно свойство flex-direction позволяет делать флексбоксы не только колонками, но и «строчками», создавая уже полноценные модульные сетки, а не только колонки в одну строку. flex-grow растягивает колонку на все доступное пространство, не занятое другими колонками, а order позволяет расставлять элементы в произвольном порядке. В общем, c помощью flexbox можно написать полноценную сетку и модифицировать ее на разных экранах как захочется.

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

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

Grid layout

Grid layout – это CSS-реализация модульных сеток, придуманная для сеток и тех верстальщиков, которые думают сетками. Чтобы сверстать страницу с замысловатой сеткой, ничего лучше, чем grid layout не придумаешь.

Плюсы: полноценная реализация сеток, понятная, компактная и специально придуманная для этого; grid-свойства можно добавлять смысловым элементам, без использования элементов-оберток, кода получается меньше; в ближайшем будущем grid layout заменит остальные подходы, так что стоит хотя бы попробовать.

Минусы: grid layout не универсален, переиспользуемые классы с display: grid придумать трудно (да и не нужно); некоторые свойства модулей рассчитываются только после отрисовки (как у flexbox), а это ведет к проблемам с производительностью; поддержка grid layout появилась около года назад, и по меркам веб-стандартов это довольно мало,  поэтому пока необходимо использовать фоллбеки — это значит сперва написать сетку другим способом, а потом сверху приправить grid layout.

Совет: используйте grid, если ваш дизайнер прочитал что-то про сетки и нарисовал очень «сеточный» макет. Или если очень хотите показать, что вы уже одной ногой в будущем.

Существуют и другие, более экзотические реализации колоночных систем (привет, susy!), а если вы не хотите писать как все, можете и сами придумать себе велосипед, на котором лично вам ехать будет удобнее.

Покажем на примере, как простое выравнивание может преобразить страницу. Мы специально не меняли дизайн, цвета и общую компоновку страницы, только применили выравнивание:

 

Верстайте по сетке!