Конструктор Gridbox базируется на гибкой CSS-сетке, которая автоматически подстраивает контент под ширину экрана пользователя. Точки, в которых верстка сайта перестраивается и изменяет свои стили (например, колонки превращаются в строки), называются контрольными точками или брейкпоинтами (Breakpoints). Gridbox позволяет не просто использовать стандартные пресеты, но и вручную управлять этими лимитами.
1. Стандартная сетка разрешений в Gridbox
По умолчанию в ядро конструктора зашиты 4 основные области просмотра (Viewports), которые закрывают 100% современных гаджетов:
- ■ Desktop (Настольные ПК): Экран по умолчанию. Применяется для всех разрешений шириной от 1201 пикселя и выше.
- ■ Laptop (Ноутбуки): Включается при ширине экрана от 1025px до 1200px. Идеально для калибровки верстки под экраны планшетов в альбомной ориентации и небольших ультрабуков.
- ■ Tablet (Планшеты): Включается при ширине экрана от 769px до 1024px. Вертикальная ориентация большинства планшетов.
- ■ Phone (Смартфоны): Самый узкий слой. Активируется для всех экранов шириной от 0px до 768px.
2. Кастомное изменение границ брейкпоинтов
Если дизайн вашего макета требует уникальных точек перелома верстки, вы можете изменить дефолтные пиксельные диапазоны:
- ■ Откройте визуальный редактор Gridbox и перейдите в левом сайдбаре в Theme Options (Настройки темы).
- ■ Выберите раздел Layout и найдите блок Breakpoints.
- ■ Введите ваши значения в пикселях для Laptop, Tablet и Phone.
- ■ Нажмите Save. Компилятор Gridbox автоматически пересчитает медиа-запросы темы под новые параметры.
На уровне компиляции стилей Gridbox генерирует CSS-правила по принципу max-width. Это значит, что если для смартфона задана точка перелома 768px, стили этого устройства будут обернуты в конструкцию @media (max-width: 768px). Все, что вы настроите в мобильном режиме, принудительно перезапишет десктопные стили, как только ширина окна браузера станет меньше или равна указанному значению.
Без острой технической необходимости (например, жесткое требование ТЗ по специфическим экранам терминалов) никогда не меняйте дефолтные брейкпоинты Gridbox. Стандартные точки 1200 / 1024 / 768 выверены годами практики и идеально соответствуют фреймворку Bootstrap и большинству современных CSS-моделей. Изменение этих цифр может сломать адаптивность некоторых предустановленных плагинов (например, сложных мега-меню или таблиц данных), которые рассчитывают свои анимации на базе стандартного шага сетки.