Список не по сетке

Как оказалось, для некоторых настоящая проблема расположить «несеточное» количество элементов по сетке (например, запихнуть 4 одинаковых столбика в 5-колоночную сетку). На само деле, все очень просто.

Сначала планировал видео записать, но не уверен, что десятисекундный ролик передал бы в полной мере суть. Поэтому ловим картинки!

Условие

Есть макет главной страницы сайта, сделанный по 10-колоночной сетке:

Нужно показать выпадающее меню, как на текущем сайте:

Решение

И так, у нас 10 колонок и 5 столбиков ссылок. Казалось бы, что тут сложного: просто располагаем все по сетке и профит. Да, но слева не будет отступа:

Окей, сдвигаем левый столбик вправо немного — появляется некрасивая двухуровневая ссылка. А это так себе история:

Тогда сдвинем все столбцы вправо, а не только первый!

Сетка вкл
Сетка выкл

Ну вроде готово? Останется только по высоте отредактировать выпадашку и можно отправлять заказчику. Можно. Сделали, что просили. Как принято утверждать, становясь в позу: «Все по ТЗ!»

Но давай немного улучшим?

Для начала надо разрулить количество строк в столбцах: 5 / 5 / 4 / 4 / 1 — я так и не понял какая тут закономерность. Но очевидно, что вместо пятого набора ссылок тут одна большая дырка. Вообще 19 ссылок гораздо лучше поделить на 4, а не на 5, чтобы получилось: 5 / 5 / 5 / 4. Вот только победив одну проблему, придумали себе другую: как разместить все это в 10-ти колоночной сетке:

Как не крути — не получается. Поэтому замутим то, что некоторые дизайнеры почему-то боятся или просто стесняются сделать: самостоятельную сетку для отдельного блока сайта. Сначала прикинем внешние отступы. Мне кажется 40px отлично подойдут, учитывая расстояние между колонками основной сетки в 20 пх.

Достаем калькулятор и считаем: (1320 — 40 — 40) / 4 = 310 пх.

Сравни промежуточные результаты пяти- и четырех-колоночного варианта:

5 колонок
4 колонки

Подтюним вертикальные отступы:

И получим аккуратное выпадающее меню без каких-либо явно выраженных дырок с равномерно заполненным контентом.

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

Но чтобы это не казалось багом, а было частью замысла дизайнера — сделаем черточку шириной 40пх вместо просто пустой строки. К нижней части выпадашки тоже можем добавить зеленую полоску. Ширинрй 4пх, именно такой толщины белая полоска, отделяющая меню и слайдер.

Каеф, да?

Альтернативный способ создания сетки

Этот способ быстрее и проще, и сам я пользуюсь им. Но вариант с калькулятором сначала нужно было показать, чтобы лучше передать суть происходящего. Создать сетку очень просто обычными прямоугольниками. Для начала прикидываем отступы слева и справа. Пусть будут тоже по 40пх. Делаем два сорокопиксельных прямоугольника:

Добавляем 4 одинаковых прямоугольника между ними (любой ширины):

Ставим их вплотную к левому:

И растягиваем до правого:

И за пять-шесть секунд наша сетка готова:

Ну, а дальше ты уже знаешь:

Профит!

Оставить комментарий

Укажите корректно свой e-mail

Извините, для комментирования необходимо войти.
6 комментариев
1

Спасиб, такой формат по "злободневным" проблемам очень ок, продолжай и почаще!
ЗЫ-книгу прочитал, понятно написана, без воды, жаль только раньше за неё не взялся, быстрее бы прояснил всякие моменты, а не рылся по сети. Более глубокое продолжение будет?

Ответить
2

К сожалению, не буду оригинальным, сказав, что ни на что не хватает времени.
Раньше в блоге чаще писал, теперь хорошо, если раз в неделю-две.
В портфолио несколько работ висят с декабря оформленных, но не публикую, потому что не сделал еще видосы, а без видосов не хочу.
На одном популярном (ну в своих кругах) футбольном сайте зимой предложил дизайн обновить бесплатно, взамен на копирайт в футере. Сделали пару страниц и как-то тоже подвисло все по той же причине.
А еще ремонт сделал и теперь фильмы посмотреть, в плойку поиграть, днем поспать — милое дело.
Тут еще и весну завезли, что совсем все усложняет 🙂
Поэтому я пока не буду отвечать на твой вопрос…

Ответить
3

Ну хотя бы новую работу запили что ли 😀
А на плойке да, щас вон чего выходит!

Ответить
4

Да, вот тоже жду 🙂 Люблю такое!

Ответить
5

Крутой лайфхак, спасибо,
Взял на заметку!

Ответить
6

Пожалуйста

Ответить