Как создать адаптивный макет с помощью сетки в Zero Block?

Чтобы создать адаптивный макет с помощью сетки в Zero Block, нужно настроить сетку для каждого разрешения экрана. 35 По умолчанию используется 12-колоночная сетка. 3

Чтобы настроить сетку, нужно: 3

1. Перейти в Zero Block. 3
2. Нажать на кнопку Settings. 3
3. Нажать на кнопку Open в разделе Zero Block Settings. 3
4. Открыть настройки рабочей области. 3

Некоторые настройки вертикальной сетки:

• Columns — количество колонок; 3
• Column width — ширина колонок в пикселях; 3
• Column gutter — расстояние между колонками в пикселях; 3
• Column margins — отступ слева и справа от сетки в пикселях. 3

Некоторые настройки горизонтальной сетки:

• Row baseline — шаг горизонтальных рядов в пикселях; 3
• Module height — количество рядов (один модуль), после которых добавится пустая строка и модуль начнётся заново; 3
• Row margins — отступ сверху и снизу от сетки в пикселях. 3

Некоторые общие настройки сетки:

• Color — цвет колонок; 3
• Opacity — прозрачность заливки колонок; 3
• Border opacity — прозрачность границ колонок. 3

По умолчанию настройки сетки задаются для всего проекта, то есть в каждом Zero Block будет автоматически использоваться новая сетка. 3 Чтобы задать уникальную сетку для конкретного блока, нужно в пункте «Use for» выбрать опцию «Current block». 3 Тогда настройки применятся только к текущему блоку, а в остальных блоках останется сетка по умолчанию. 3

Чтобы проверить, как сайт выглядит на разных экранах, нужно переключиться между брейкпойнтами (они расположены в верхней части экрана). 4 Когда дизайн в целом проработан, нужно адаптировать его к разным разрешениям: планшетам, смартфонам, ПК. 4