Сетка помогает определить базовую структуру дизайна страницы и ускорить работу с макетом. Она создаёт единую схему расположения всех элементов и блоков сайта и помогает сохранить визуальный порядок.
По умолчанию в Тильде используется 12-колоночная сетка. Чтобы настроить уникальную сетку, перейдите в Zero Block, откройте настройки Artboard и найдите кнопку Zero block settings. Разберёмся, для чего нужно каждое поле.
Columns — количество колонок в сетке.
Column Width — ширина колонок. При изменении ширины, меняется значение межколоночного расстояния Column Gutter и наоборот.
Column Margins — отступы слева и справа от края артборда для колонок.
Также вы можете настроить горизонтальную сетку. Она обычно используется для типографики.
Row Baseline — шаг горизонтальной сетки. Обычно это значение берётся исходя из базового размера вашего шрифта. Например, если для основного текста вы используете шрифт размером 14px с межстрочным расстоянием 20px, то и расстояние между линиями будет 20px.
Module Height пригодится, если вы используете повторяющиеся модули в дизайне. Например, если указать значение 5, то через каждые пять рядов будет пустая строчка, а модуль будет начинаться заново.
Row margins — отступ сверху и снизу от края артборда.
Для каждого разрешения экрана сетка настраивается отдельно: она будет разной на десктопе и на мобильных устройствах. Включить и выключить сетку можно нажав G или перейдя в раздел с трёмя точками в верхнем правом углу экрана.
По умолчанию настройки сетки задаются для всего проекта. Если мы создадим новый Zero block, то увидим в нём ту модульную сетку, которую только что настроили. Это удобно, чтобы сохранить единство дизайна на разных страницах проекта.
Но если вам нужна уникальная сетка для конкретного блока, то вернитесь в настройки сетки и выберите для параметра Use for опцию Current Block. Тогда настройки применятся только к текущему блоку.
Вы всегда можете сбросить изменения и вернуть сетку по умолчанию. Для этого нажмите на кнопку Reset в самом низу панели настроек и сохраните изменения.
