И вот мы наконец потихоньку подходим к нужной нам сетке! Почти. Давайте разбираться. Модульная сетка — это сетка, в основании которой лежит модуль. Модуль — это условная единица, шаг в ритме сетке. Модуль образуется за счет пересечения вертикалей и горизонталей. Модульная сетка выглядит как ирландский пледик в квадратик. Модульная сетка — это универсальный инструмент организации пространства. Данную сетку всегда используют в графическом дизайне при верстке журналов, книг, в дизайне плаката и т.д.
А используют ли ее в проектировании интерфейсов? Ответ — и да и нет. В UI дизайне используется колончатая сетка, которая, в зависимости от разрешения экрана, немного видоизменяется. Многие интерфейс-дизайнеры ошибочно говорят, что они работают с модульной сеткой. Да, они безусловно могут работать (и надо работать!) не только с колонками, но и соблюдают ритм относительно горизонталей. Однако, когда данные круто спроектированные макеты приходят к разработчику... они не используют и не смотрят на горизонтальную сетку, а работают только относительно вертикалей, то есть колонок.
Так как тогда быть дизайнеру? И какой смысл использовать горизонтальную сетку? Вы, скорее, должны выработать определенную структуру отступов между элементов. Безусловно, если у вас идеальная дизайн-система (например, как в material, где все построено на 8 пиксельной сетке), и ваши отступы имеют структурированные пропорциональные значения при расположении относительно горизонтальной сетки (когда нет такого, что есть отступ в 13 пикселей, а все остальные кратны двум), то тогда вперед! Используем горизонтальную сетку для удобства. Но, если выше перечисленные условия не соблюдаются, то можно просто работать с системой отступов. Например, между заголовком H1 и текстом вы всегда делаете отступ в 30 пикселей, а между текстом и кнопкой 40.