Система модульной сетки в современных графических редакторах работает на основе простых геометрических фигур (модулей), которые расположены в определённой последовательности. 3 Это позволяет визуально разделить рабочее пространство на равные блоки. 3 Обычно в качестве модулей выступают квадраты или прямоугольники, но за основу могут брать и другие фигуры, например, окружности. 3

Основные элементы модульной сетки: 4

• Колонки. 4 Вертикальные линии, которые делят поверхность на столбцы. 4
• Ряды. 4 Горизонтальные линии, образующие строки. 4
• Модули. 14 Основные ячейки сетки, образованные пересечением колонок и рядов. 1
• Гуттеры. 4 Промежутки между колонками и рядами, обеспечивающие воздушное пространство и улучшающие читаемость. 4

Чтобы создать модульную сетку, нужно выполнить следующие шаги: 3

1. Перечислить все элементы вёрстки и примерно представить макет. 3
2. Задать базовую единицу — это число, кратное параметрам будущей сетки (ширине, межколоннику и полям). 3 Обычно оно составляет 8 пикселей, реже 5. 3
3. Определить количество модулей в сетке. 3 Например, стандартное число для колоночной сетки — 12. 3
4. Задать параметры. 3 Например, начинающим дизайнерам рекомендуют устанавливать ширину колонки 64 пикселя и межколонник 24, а под поля отвести всё оставшееся. 3

В таких графических редакторах, как Sketch и Figma, сетки уже встроены. 5 Также есть специальные плагины для графических редакторов, например, для Adobe Photoshop и Adobe Illustrator. 5