Сетка — это структурная основа из линий, используемая для выравнивания элементов дизайна. Она делит страницу на столбцы, строки и поля, предоставляя дизайнеру систему для размещения контента. Швейцарский дизайнер Йозеф Мюллер-Брокманн кодифицировал принципы сетки в 1960-х годах, и его книга «Системы сеток в графическом дизайне» до сих пор остается стандартным справочником. Газеты, журналы и веб-сайты используют сетки, хотя и по-разному.

Типичная сетка имеет столбцы, промежутки и поля. Столбцы содержат контент. Промежутки разделяют столбцы. Поля обрамляют страницу. 12-колоночная сетка распространена в интернете, поскольку она равномерно делится на половины, трети, четверти и шестые части. Дизайнеры могут использовать несколько столбцов для более широкого контента или один столбец для узкого текста. Сетка не диктует дизайн. Она предоставляет структуру, которой дизайнер может следовать, изменять или нарушать намеренно. Нарушение сетки может быть очень эффективным. Изображение, занимающее всю страницу и игнорирующее столбцы, привлекает внимание именно потому, что нарушает структуру.

Компоненты сетки

• Столбцы: вертикальные полосы для отображения контента.
• Водосточные желоба: зазоры между колоннами.
• Поля: внешние края макета.
• Базовая сетка: горизонтальные линии для выравнивания текста.

Сетка — это не клетка. Это инструмент, позволяющий быстрее принимать решения и поддерживать согласованность макета на множестве страниц или экранов.