Мы уже видели эту замечательную страницу про аквапарки:
И это тот случай, когда не помешала бы сетка. Задача сетки — гайдлайнизировать и успокоить содержимое страницы, которое вы сверстали. Если у вас есть модульная страница, на которой есть разные колонки и иллюстрации, — эта страница может быть длинной или одной из целой серии разных страниц, — то на помощь приходит сетка. Вы её придумываете, подстраиваете под тот дизайн, который вы изобрели, и дальше, наоборот, подстраиваете дизайн под эту сетку.
Сейчас покажу несколько примеров.
Вот, например, базовая сетка разворотов в газете «Учёт. Налоги. Право»:
Это пятиколончатая сетка. В свою очередь, эти пять колонок делятся ещё раз пополам. Итого у нас десятиколончатая сетка:
И если посмотреть на свёрстанный разворот, то он подчиняется этой сетке:
Каждый разворот в «Учёт. Налоги. Право» дружит с этой сеткой. Благодаря этому получается порядок, системность, и, главное, редакция газеты понимает, как им верстать те или иные развороты. Не может быть такого, что какая‑нибудь текстовая колонка взяла и вылезла за сетку.
А для читателя это всё выглядит гораздо упорядоченнее, чем та история с аквапарком, которую мы видели.
Важно понимать, что сетка — это инструмент. Никогда не начинайте проектирование макета, страницы, разворота, плаката с того, что рисуете сетку. Сетка, вполне возможно, вам в принципе не понадобится.
Вот, например, промостраница корпоративной школы «Главбуха», на которой сетки нет в принципе:
Здесь сетка просто не нужна. Это достаточно короткая страница. Она единственная в своём роде, у неё нет никаких клонов. Мы здесь насчёт сетки не заморачивались, и вообще никто от этого не умер. Просто мы аккуратно расположили этажи друг за другом. И максимум, что мы соблюли, — единый левый край и правый край у всей страницы. Сетку здесь никто не рисовал.
А если речь идёт про какую‑нибудь газету, или особо сложную страницу, или целый сайт, тогда сетка очень может вам помочь. Если говорить про «Лавишустринг», то смотрите, какая у него сетка:
Это довольно интересный приём. Здесь сетка с нечётным количеством колонок — семь колонок. И когда количество колонок нечётное — это позволяет добиваться кое‑каких интересных эффектов. В данном случае мы благодаря этому получили очень динамичные композиции. У нас не может быть симметричных этажей. То есть обязательно есть какая‑то главная иллюстрация. Если посмотреть, всё так устроено. Видите, как всё аккуратно при этом по сетке выстроено:
Кстати, по этой же сетке выстроена и страница отдельного товара:
Тоже две колонки, две колонки, две колонки, одна колонка. Здесь у нас, правда, справа блок Size вылез за сетку, но это скорее баг, чем фича.
Семиколончатая сетка, нечётное количество колонок дали нам вот такой любопытный эффект: мы стали фотографии и фактоиды накладывать друг на друга. Получился журнальный приём.
Вот ещё один способ применения сетки:
Это главная страница справочной системы «Юрист», предыдущая версия. Здесь сетка — это не просто какое‑то количество колонок, равномерно растянутых от края до края. Здесь двойная сетка: есть четыре колонки в рамках, в которых живёт основная колонка с какими‑то виджетами, и ещё одна отдельная колонка с новостями, живущая по своим законам. И если мы говорим про эту основную колонку, то здесь все виджеты выравниваются по сетке, и им хорошо.
То же самое происходило в «Системе Главбух», она является клоном «Юриста»:
Причём обратите внимание, что в разных системах разный набор виджетов. Но они всё равно все выстроены по сетке, дружат. Есть ощущение порядка и системности.
Ещё один пример динамической сетки — это сайт «Биз‑цен»:
У него очень простая в своей основе сетка: мы просто поделили сайт на три колонки. Здесь даже отступы от краёв экрана и между самими колонками одинаковые — по 10 пикселей. Вот такая примитивная штука.
Но если я растяну сайт достаточно широко, у меня три колонки превратятся и в четыре колонки, и даже в пять:
Отступы между колонками будут сохраняться по 10 пикселей, просто колонок станет больше. Иногда это тоже уместно. Здесь это сработало.