Сетка в веб-дизайне: 12 колонок и что с ними делать

Как выбрать количество колонок, гуттер и поля, когда ломать сетку и почему асимметричная раскладка выглядит дороже симметричной.

Зачем сетка, если есть флексбокс

Сетка нужна не для вёрстки, а для решений: она отвечает на вопрос, какой ширины должен быть блок и где он начинается. Без неё каждое такое решение принимается заново и по-разному.

Внешне это проявляется как «сайт выглядит собранным» или «сайт выглядит случайным» — при том же наборе блоков.

Почему 12 колонок

Двенадцать делится на 2, 3, 4 и 6 — это покрывает почти все нужные раскладки. Отсюда популярность числа, а не из-за какой-то особой красоты.

Для контентных сайтов встречаются и другие варианты: 16 колонок дают больше свободы, 8 — более жёсткий ритм. Редакционные проекты часто используют асимметричные сетки с колонками разной ширины.

Гуттер и поля

Гуттер — расстояние между колонками — определяет плотность. Узкий (16–20 px) даёт плотный технический вид, широкий (32–48 px) — воздушный редакционный.

Поля контейнера почти всегда стоит делать адаптивными через clamp: на мобильном 20 px, на большом экране 64–80 px. Фиксированные поля выглядят тесно на широких мониторах.

Когда ломать сетку

Разрыв сетки работает как акцент только в том случае, если сама сетка очевидна. Если раскладка и так хаотична, «выход за границы» просто не читается.

Работающие приёмы: изображение шире текстовой колонки, заголовок, выходящий за правый край, подпись на полях, элемент, наезжающий на соседний блок.

Мера текста

Отдельно от сетки существует ограничение читаемости: текстовая колонка не должна превышать 65–75 знаков в строке. На широком экране это означает, что текст занимает не всю сетку, а 6–8 колонок из 12.

Дизайнеры часто растягивают текст на всю ширину контейнера — и получают строки по 120 знаков, которые физически неудобно читать.

Сколько колонок нужно на самом деле

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

Гуттер важнее числа колонок: он задаёт воспринимаемую плотность полосы. Правило, которое почти не подводит, — гуттер не меньше половины базового межстрочного расстояния, иначе соседние колонки текста начинают читаться как одна.

Когда сетку ломают

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

Асимметричная раскладка — не нарушение, а отдельная сетка со смещённой осью. Её строят так же строго, просто ось проходит не по центру полосы, и все блоки выравниваются по ней.

Что в итоге

Сетка нужна не для порядка ради порядка, а чтобы решения о ширине принимались один раз и последовательно.

Держите текст в 65–75 знаках, а сетку ломайте осознанно и редко — тогда разрыв будет работать как акцент.