Сетка позволяет определить базовую структуру дизайна и ускорить работу с макетом. Она создаёт единую схему расположения всех элементов сайта и помогает сохранить визуальный порядок.
По умолчанию в Тильде используется 12-колоночная сетка.
Чтобы настроить сетку, перейдите в Zero Block → нажмите на кнопку Settings → нажмите на кнопку Open в разделе Zero Block Settings → откроются настройки рабочей области.
Для каждого разрешения сетка настраивается отдельно: она будет разной на десктопе и на мобильных устройствах.
Включить и выключить сетку можно с помощью нажатия на клавишу G на клавиатуре или перейдя в раздел с тремя точками в верхнем правом углу экрана → кнопка "Show/Hide Grid".
Настройки вертикальной сетки
Columns — количество колонок; Column width — ширина колонок в пикселях; Column gutter — расстояние между колонками в пикселях; Column margins — отступ слева и справа от сетки в пикселях.
Некоторые значения можно заблокировать, чтобы они оставались такими же при изменении других. Для этого нажмите на иконку замка у нужного параметра.
Настройки горизонтальной сетки
Row baseline — шаг горизонтальных рядов в пикселях; Module height — количество рядов (один модуль) после которых добавится пустая строка и модуль начнется заново; Row margins — отступ сверху и снизу от сетки в пикселях.
Общие настройки сетки
Color — цвет колонок; Opacity — прозрачность заливки колонок; Border opacity — прозрачность границ колонок.
Важно: по умолчанию настройки сетки задаются для всего проекта. То есть в каждом Zero Block будет автоматически использоваться новая сетка.
Чтобы задать уникальную сетку для конкретного блока, перейдите в настройки сетки → выберите в пункте "Use for" опцию Current block. Тогда настройки применятся только к текущему блоку, а в остальных блоках останется сетка по умолчанию.
Также вы всегда можете отменить изменения и вернуть настройки сетки. Для этого нажмите на кнопку «Reset grid settings to default» → во всплывающем окне нажмите на кнопку «Ok».