Модульная сетка: как устроена и зачем дизайнеру двенадцать колонок

Что такое модульная сетка и зачем она дизайнеру?

Представьте страницу, на которой каждый блок поставлен на глаз. Заголовок чуть левее текста, картинка чуть выше соседней карточки, кнопка висит без опоры. Читать такое можно, но взгляд всё время спотыкается о неровные края, и общее впечатление одно: бардак. Модульная сетка убирает этот эффект, потому что задаёт линии, к которым привязывается каждый элемент.

Если говорить коротко, это система из колонок, рядов и отступов между ними. Дизайнер выравнивает по её направляющим всё подряд: тексты, картинки, кнопки, цифры в карточках. Нужен новый блок, берёшь ближайшую линию и ставишь его, без линейки и пересчёта. Поэтому сетку придумывают заранее: пока редактор готовит текст, дизайнер уже прикидывает, где этот текст будет стоять.

Пользу сетки Яндекс Практикум раскладывает на пять задач:

• Единый стиль: правила выравнивания и добавления новых элементов.
• Быстрая вёрстка: достаточно выбрать направляющую и привязать к ней элемент.
• Аккуратный макет: пропорциональные блоки приятнее воспринимать.
• Лёгкое чтение: у страницы появляется визуальный порядок.
• Удобная работа разработчиков: макет по сетке проще верстать.

Лучше всего видна четвёртая задача. Если все заголовки выровнены по одной левой линии, посетитель при поиске сканирует взглядом узкую полосу экрана, а не всю страницу.

Отсюда простой вывод: сетка снимает лишние решения и оставляет свободу для содержания. Выравнивание перестаёт быть отдельной задачей. Для лендинга, где блоки постоянно добавляют и переставляют, это особенно заметно. Как собирается такой макет целиком, мы разбирали в статье про лендинг.

Чем модульная сетка отличается от колоночной?

Названия часто путают, поэтому сначала проведём границу. Модульная сетка пришла из печати, где формат листа ограничен: в ней есть и вертикальные, и горизонтальные направляющие, а страница режется на клетки. Практикум называет вторым видом колоночную сетку: это та же система, адаптированная для интернета, где горизонтальных линий нет, потому что высота страницы зависит от количества содержания.

На практике дизайнеры лендингов зовут и колоночную сетку модульной, и это нормально, пока все понимают, о чём речь. Для интерфейса важнее другое. Ширина экрана конечна и меняется от телефона к монитору, а длина страницы растягивается под любое содержание. Поэтому колонки служат опорой по горизонтали, а по вертикали вместо рядов обычно держат кратные отступы.

Идея старше интернета. По версии Cyclowiki, первую типографскую сетку на модулях сделали для трактата «О божественной пропорции» математик Лука Пачоли и Леонардо да Винчи. Позже сетками стали пользоваться в журналах и газетах, и там они пригодились на практике: стандартизировали материалы, экономили место на странице и сокращали время на оформление. Среди разновидностей Cyclowiki называет и гибкую сетку, где колонки и ряды меняют размер под содержание или устройство, и нерегулярную для нестандартных макетов.

Корни приёма типографские. Швейцарец Йозеф Мюллер-Брокман, как пишет Википедия, начал с афиш для концертного зала Тонхалле в Цюрихе, и серия, известная как Musica Viva, с каждым выпуском становилась всё абстрактнее. Он передавал чувства от музыки геометрическими формами, без иллюстраций и украшений, а держалось всё на строгой системе.

Позже он стал европейским консультантом IBM и собрал опыт в книге Grid Systems in Graphic Design. Skillbox пересказывает из неё правило для текста: книжный эталон составляет примерно семь слов в строке. В разборе Skillbox это правило объяснено через усталость глаза:

Утомляют и слишком длинные, и слишком короткие строки.

Йозеф Мюллер-Брокман, цитата из разбора книги на Skillbox

У Мюллер-Брокмана есть и совет про картинки. Если изображение без чётких границ ставят вразрез, макет выглядит неустойчиво, и тогда Skillbox пересказывает его решение: подложить серую или цветную плашку, размер которой вмещается в модуль. Дизайнеру он советует приходить на съёмку и обсуждать композицию с фотографом заранее, чтобы кадры потом ложились в модули.

Для веба из этого вырастает рабочая привычка: ширина текстовой колонки подчиняется читателю, и заполнять экран целиком никто не обязан. Остальной макет выстраивается вокруг неё. Если сначала нарисовать каркас страницы, такой подход проверяется быстро, подробнее про каркасы в материале про вайрфреймы.

Как рассчитать сетку: пять шагов от списка до отступов

Практикум описывает расчёт в пять этапов, и первую сетку можно собрать за вечер:

• Шаг 1. Выпишите, что будет на странице: заголовки, тексты, логотипы, кнопки, иконки, карточки товаров, картинки.
• Шаг 2. Выберите базовую единицу. Обычно это 8 пикселей, а если так требует разработчик, 5. Ширины колонок, межколонников и отступы будут кратны ей.
• Шаг 3. Набросайте макет от руки: по черновику видно, сколько и каких элементов придётся вписать.
• Шаг 4. Определите число колонок. Стандарт 12, а для простого содержимого хватит шести или восьми.
• Шаг 5. Задайте ширину колонки, межколонник и поля.

Если над страницей работает несколько человек, раннее проектирование сетки экономит время: пока редактор готовит текст, графический дизайнер уже продумывает, как его разместить. Остаётся договориться о базовой единице, и дальше все размеры у команды совпадают.

Самая распространённая связка параметров такая: колонка 64 пикселя, межколонник 24, поля занимают остаток. Новичку разумно начать с неё. Если колонки не хватает для элементов, дизайнер решает сам: расширяет колонку, сужает межколонник, делает и то и другое или переставляет блоки. Жёстких правил тут нет, работает опыт и насмотренность.

Тот же расчёт можно довести до строк текста. Skillbox разбирает пример из книги Мюллер-Брокмана. Высота полосы на макете 57 строк, колонка занимает четыре модуля по вертикали, а промежутки равны строке текста. Три строки уходят на промежутки, остальные 54 заполняют колонки. Деление 54 / 4 даёт 13,5, но половины строки не бывает, и в итоге получается колонка из 13 строк с тремя слепыми.

Почему чаще всего берут 12 колонок?

Двенадцать делится на два, три, четыре и шесть, поэтому из такой сетки выходят блоки разной ширины без дробных значений. Практикум добавляет, что блок в одну колонку при этом не слишком узкий и годится, например, для иконок соцсетей. На этом построен Bootstrap: в его документации сказано про двенадцать шаблонных колонок в строке, а между колонками стоят отступы общей шириной 1,5rem.

Но число колонок подбирают под задачу, и лучше всего это видно на примере The New York Times. Как пересказывает Vanseo Design, дизайн-директор газеты Khoi Vinh начал с рекламного блока 336 на 280 пикселей и зафиксировал ширину макета в 960. Сначала он поделил страницу на три равные колонки по 320, но реклама шириной 336 в них не влезла. Четыре колонки тоже не подошли. Дробление дошло до двенадцати, и в такую сетку баннер поместился вместе с остальными элементами.

Расчёт для такого макета обсуждали и на конференции SXSW. По конспекту доклада, ведущие предложили числа, кратные трём и четырём, а для рекламы в 336 пикселей посчитали сетку из 14 единиц: это нечётное число оставило слева более широкую навигацию. Сетка подстраивалась под содержание.

Автор материала на Vanseo Design показывает ещё два случая без рекламы. Для сайта фотографа точкой отсчёта стали миниатюры, по четыре в ряд на широком экране. Десять колонок (восемь под картинки, две под текст) не сработали: вышло тесно, и подгонка отступов не помогла. Тогда он взял двенадцать, где восемь колонок идут под картинки, три под текст и одна остаётся пустой между ними. Для текстового сайта опорой стала длина строки: двенадцать колонок дали неудачную пропорцию, и остановились на восьми, где текст занимает пять колонок, слева от него пустая колонка, а ещё две отданы под метаданные и подменю.

Сетки реальных проектов: от четырёх до двенадцати колонок

Магазин «Рив Гош» обходится четырьмя колонками, как разбирает Практикум: одна занята меню, три отданы карточкам товаров. Если в карточки понадобятся кнопки, иконки или дополнительный текст, четыре колонки легко превращаются в восемь.

Сервис Similarweb, по разбору Практикума, свёрстан на десяти колонках. Такая сетка оставляет меньше свободы, потому что делится только на два блока по пять колонок, но простому содержимому этого хватает. Из сетки выпадает лишь бегущая строка с логотипами, а для динамичных элементов выравнивание необязательно. Сложное содержимое сетки совмещают: у «Озона» основная сетка состоит из двенадцати колонок, и в неё вписан блок с собственной сеткой под мелкие карточки товаров.

Сведём примеры вместе. Магазину с меню и карточками хватает четырёх колонок, сервису с простыми блоками десяти, а у «Озона» и у газеты с рекламным баннером сетки двенадцатиколоночные. Логика у всех общая: сначала находят элемент с жёсткими размерами, будь то меню, карточка товара или баннер, и уже под него подбирают число колонок.

Как собрать сетку в Figma и перенести её в код?

Для первой сетки подойдёт Figma, Практикум советует её новичкам. Создайте фрейм клавишей F со стандартным размером экрана 1440 на 1024 пикселя, добавьте направляющую в правой панели и переключите её на колонки. В справке Figma эти направляющие называются layout guides: колонки идут на всю высоту фрейма, ряды на всю ширину.

Тип колонок выбирают из четырёх: Left, Right, Center и Stretch. Left и Right нужны для сложных интерфейсов, новичкам лучше выбрать Center или Stretch. При Stretch колонки растягиваются вместе с фреймом, и обязательно задать поля. При Center вручную вводят ширину колонки и межколонник, а поля Figma считает сама. Поля дальше подстраиваются под выбранные значения.

Дальше сетка должна жить в коде, и путей два. Первый путь, Bootstrap: его уровни адаптивности построены на медиазапросах min-width, поэтому правило для одного уровня действует и на всех, что шире. Всего уровней шесть, от экстра-малого до экстра-экстра-большого, как сказано в документации. Макет стоит проверять на каждом.

Второй путь, CSS Grid. MDN описывает его как метод для двумерных макетов, где элементы выравниваются и по столбцам, и по строкам, а работать с ним проще, чем с таблицами. Колонки задаются свойством grid-template-columns, и для двенадцати равных колонок большего не потребуется.

Ошибки, которые ломают сетку

Первая ошибка: брать двенадцать колонок по привычке. Для простой страницы из пары заголовков, текстов и картинок Практикум советует сетку из шести или восьми колонок, а двенадцать только усложнят работу. Число стоит выбирать и по делимости: в 12-колоночной сетке элементы раскладываются шестью способами, а в 16-колоночной только пятью.

Вторая ошибка: теснота. Фотографу из примера выше десять колонок не подошли из-за недооценённого расстояния между картинками и текстом, и материал Vanseo Design честно признаёт, что подгонка отступов не спасла. Закладывайте промежутки заранее и проверяйте их на реальных блоках с текстом.

Третья ошибка: считать сетку догмой. Практикум прямо говорит, что при проектировании жёстких правил нет и дизайнер опирается на опыт и насмотренность. Сетки к тому же можно совмещать, если содержимого много и оно сложное. Если блок вылезает за колонки, но читателю с ним удобно, поправить придётся сетку.

Частые вопросы