Підкажіть, будь ласка, як вирівняти меню по сітці
Будь ласка, підкажіть, як вирівняти меню по сітці. Рівняти заголовки по центру блоків?
Щоб добре згорнути, на самому початку краще забути про напрямні. Прямо взяти та прибрати:
Питання відразу перекваліфікується з геометричної загадки на завдання наведення порядку. Ми бачимо чотири логічно рівнозначні колонки з приблизно однаковим багаторядковим текстом, хоча й різної висоти. Найпряміше рішення — зробити колонкам однакову ширину, щоб з'явився акуратний ритм. Він компенсує різну висоту колонок:
Ніхто нам не заборонить і зробити навпаки: вирівняти висоти блоків, а чи не ширину колонок. Це швидше паперовий прийом, ніж екранний, але цілком допустимий у передбачуваних блоках, як наше меню:
Якщо меню складається тільки з окремих слів, їх природніше об'єднати в рядок Воронезького з рівними пробілами:
Я раджу використовувати гайди як креслярську лінійку, щоб точно збудувати, що вже придумано. Вихідник макету з мільйоном вертикальних і горизонтальних напрямних - вірна ознака любителя.
Коментарі
Фішка в тому, що треба не робити рівної відстані між лініями виключення стовпчиків, а в тому, щоб створити ілюзію рівної відстані. Знання типографіки відкриває кльові речі - наприклад, що меню теж можна кернити.
Існують два способи: 1. Зробити порожній простір між стовпчиками візуально однаковим. На око. Це має сенс у жорсткому дизайні – у постерах, на афішах, на картинках.
2. Зробити відстань між стовпчиками чисельно однаковою. Має сенс у веб-дизайні (так не вламаєшся пояснювати верстальнику, що тобі від нього треба). Тільки тут треба заздалегідь звести стовпчики до прямокутника (щоб не було надто довгих рядків поряд із надто короткими).
В даному випадкуобидва меню вийшли однакової ширини, хоча якщо придивитися, різниця є (перший варіант приємніший).