Колонки (Columns) в конструкторе Gridbox определяют горизонтальную структуру размещения контента. На больших экранах многоколоночные макеты (например, 3 или 4 колонки в ряд) выглядят отлично, но на узких дисплеях смартфонов они требуют перестроения. Gridbox позволяет гибко управлять шириной, отступами и порядком следования колонок отдельно для каждого мобильного разрешения.
1. Автоматическое и ручное изменение ширины (Column Width)
По умолчанию адаптивная система Gridbox принудительно сбрасывает ширину всех колонок внутри строки до 100% при переключении в режим смартфона (Phone). Это выстраивает плагины в один удобный для чтения вертикальный стек. Однако вы можете переопределить это поведение вручную:
- ■ Переключитесь в нужный мобильный режим (например, Tablet или Phone).
- ■ Наведите курсор на колонку и откройте её параметры (Column Settings) через контекстное меню.
- ■ Во вкладке Layout найдите ползунок или поле ввода Column Width.
- ■ Задайте кастомное значение в процентах. Например, если вы хотите оставить две колонки в один ряд на экране телефона, пропишите им по
50%ширины. Если три колонки — по33.33%.
2. Выравнивание контента внутри колонок
Тексты и кнопки, которые на десктопе были выровнены по левому краю, на смартфонах часто смотрятся аккуратнее, если их отцентровать. Порядок настройки:
- ■ В параметрах колонки перейдите во вкладку Design.
- ■ Найдите блок Horizontal Alignment (Горизонтальное выравнивание).
- ■ Выберите режим «По центру». Обратите внимание на иконку мобильного телефона рядом со свойством — это подтверждает, что выравнивание изменится локально только для текущего типа устройств.
Когда на десктопе колонки стоят в ряд, между ними есть боковые отступы. Но когда на смартфонах они схлопываются в один вертикальный ряд, верхняя колонка может намертво прижаться к нижней, ломая визуальные границы блоков. Чтобы исправить это, переключитесь в режим Phone, зайдите в настройки Строки (Row Settings) и во вкладке Design -> Gutter скорректируйте нижний отступ для колонок. Система автоматически добавит красивый и равномерный шаг между упавшими друг под друга элементами.
3. Управление локальными отступами (Paddings)
Внутренние поля колонок, используемые для формирования сложного дизайна на ПК, на мобильных экранах могут «сдавить» текстовый контент.
- ■ Откройте настройки колонки, вкладка Design -> Padding.
- ■ Нажмите на иконку «цепной связи», чтобы развязать значения сторон, и уменьшите левый и правый отступы (например, до 10-15px), чтобы высвободить максимальную ширину под чтение контента на узких дисплеях.
Если вы настраиваете сетку 50% на 50% для двух колонок на смартфонах (например, вывод двух иконок преимуществ в ряд), убедитесь, что контент внутри них одинаков по объему. Если в одной колонке будет одно слово, а во второй — три строки, колонки станут разной высоты, что может сбить ровность сетки в следующем ряду. В таких случаях используйте опцию Equal Height (Одинаковая высота) в настройках родительской строки, чтобы выровнять их границы по сетке на уровне флексбоксов (Flexbox).