Некоторые методы создания горизонтального пространства в веб-дизайне:
- Зонирование. 1 Разделение экрана на функциональные или смысловые зоны. 1 Например, можно расположить картинки слева, а текст — справа. 1 Если половины экрана для текста слишком много, можно разделить его на три части: одну колонку отдать под текст, а две другие — под картинки. 1
- Детализация. 1 Разделение колонки на несколько частей, чтобы внутри сетки получилась ещё одна сетка. 1
- Использование сеток. 13 Некоторые варианты:
- «Панелька». 1 Есть вариации с максимальным подобием модулей, специальным блоком, который занимает в два раза больше места, чем все остальные, или ритмическим рисунком, который получается за счёт использования изображений любых пропорций. 1
- «Расчёска». 1 Есть варианты с вводом специального блока, который больше по вертикали, чем остальные, высотой модуля, зависящей от длины текста и высоты картинки, или с расчёской сверху, когда линия выравнивания модулей находится снизу. 1
- «Лесенка». 1 Есть вариации с делением строки на две части и смещением массы слева направо или с просмотром лонгрида по диагонали, что соответствует естественному движению взгляда. 1
- «Резинка». 1 Общая ширина модулей остаётся одинаковой, но по мере движения сверху вниз меняется количество модулей в строке. 1 Если количество модулей уменьшается, то появляется дополнительное пространство, которое используется для межколонников. 1
- «Колонная». 1 Включает два типа модулей: обычный или типовой и специальный блок во всю ширину колонки. 1 Такой вариант позволяет придать сетке неравномерность. 1
- «Алгоритмическая». 1 Пластичная, сложная сетка, которая не содержит колонок, вместо них есть вертикальные линии, на которые дизайнер подвешивает модули. 1
Также для создания горизонтального меню с равномерным распределением элементов можно использовать CSS flexbox и его свойства. 2