Сеточные системы: гид для дизайнера

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

Швейцарская школа доказала это в печати шестьдесят лет назад. Мюллер-Брокман, Хофманн, Рудер, целое поколение дизайнеров, которые считали сетку инструментом мышления, а не шорткатом для вёрстки. Этот урок состарился лучше почти любой другой части дизайн-теории. Каждая современная продуктовая сетка, от Linear до Stripe и New York Times, происходит от одной и той же идеи. Это рабочий справочник по сетке на 2026 год.

Мюллер-Брокман дал современной сетке грамматику

Книга Йозефа Мюллера-Брокмана «Grid Systems in Graphic Design» 1981 года до сих пор остается хребтом дисциплины. До этой книги сетки существовали, а словаря не было. После нее у дизайнеров появился общий язык для колонок, желобов, полей и модулей, который кочевал между студиями, школами и десятилетиями.

Швейцарская школа видела в сетке движок ограничений. Выбери систему, держись ее, а вариативность пусть приходит из контента, а не из импровизации. Плакаты Мюллера-Брокмана для цюрихской Tonhalle выглядят как скриншоты продуктового UI в 2026 году, потому что работают на той же логике.

Сильный шрифт на жесткой сетке. Пустое пространство как структурный элемент, а не остаток места. Та же логика сегодня видна в материалах вроде почему в 2026 году все SaaS выглядят одинаково, где однородность это победа сетки, а потом потеря ее остроты.

Веб перенимал эту грамматику медленно. CSS дал нам float, потом Flexbox, потом наконец CSS Grid. Каждый шаг сокращал разрыв между тем, что печатные дизайнеры могли в 1961 году, и тем, что фронтенд-дизайнеры могут в браузере.

Словарь не изменился. Колонки по-прежнему колонки. Инструменты просто догнали.

Почему сетки работают, в одном абзаце

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

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

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

Пять типов сеток в одном месте

Большинство команд считают «сетку» одним решением. Их пять. Каждая решает свою задачу раскладки и ломается по-своему. Выберешь не ту, и страница будет сопротивляться вечно.

Эта таблица - закладка. Большинство споров о раскладке заканчиваются в момент, когда команда договаривается, какую из пяти она использует.

Колоночная сетка - рабочая лошадка

Колоночные сетки - вариант по умолчанию почти для всего, что вы выпускаете в вебе. Вертикальные колонки, фиксированные желоба, опциональные поля. Контент течет по колонкам, блоки раскладки занимают одну или несколько из них, а ритм задается тем, на сколько колонок поделен холст.

Stripe использует 12-колоночную сетку на всей маркетинговой поверхности. Оболочка приложения Linear построена на колоночной сетке, которая на мобильных схлопывается в одну рейку, а на десктопе раскрывается в сайдбар плюс основную колонку. Маркетинговые страницы Vercel используют 12-колоночную сетку с намеренным негативным пространством, колонки видны, если прищуриться на матрицу цен в дашборде или раскладку лога деплоя. Та же сетка, что вела плакаты в 1961 году, ведет маркетинговые сайты в 2026, только с media queries под капотом.

Отказывайтесь от колоночной сетки, только если раскладка принципиально непрямоугольная, а в вебе это почти никогда. Разбор стека маркетингового сайта 2026 охватывает выбор фреймворков, которые стоят поверх этой сетки.

Модульная сетка - для редакционной плотности

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

Главная New York Times - каноническая модульная сетка в вебе. Заголовки, фото, аннотации и реклама сидят в ячейках с согласованными ширинами и высотами, хотя видимая композиция выглядит разнообразной. Bloomberg Terminal доводит модульную сетку до предела: информационная плотность там рухнула бы без строгой дисциплины ячеек. Галерея в Notion дает более мягкую модульную сетку: карточки привязаны к фиксированной ширине ячейки, а контент адаптируется внутри.

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

Базовая сетка - движок ритма

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

Маркетинговые страницы Apple держат строгую базовую сетку. Откройте любую продуктовую страницу и посмотрите, как заголовок, подзаголовок, изображение и основной текст делят общий вертикальный ритм. Medium использует выравнивание по базовой линии в шаблоне длинных текстов, поэтому чтение дается без усилий даже в эссе на 4000 слов. Stripe Press, издательское крыло, держит базовый ритм на каждой напечатанной странице и на каждой странице, опубликованной в вебе.

Математика в вебе проста. Выберите базовую единицу, обычно 8 пикселей. Задайте line-height основного текста кратным ей, обычно 24 пикселя, то есть 1.5 от шрифта 16 пикселей.

Заголовки тоже попадают на кратные значения, так что H1 в 48 пикселей с line-height 56 пикселей все равно ложится в тот же ритм. Вся страница гудит на одном ударе.

Иерархическая сетка - для порядка чтения

Иерархическая сетка - это кастомная сетка, построенная вокруг внутреннего приоритета контента. Вы начинаете не с колонок и строк, а с того, что должно читаться первым, вторым, третьим. Раскладка привязывается к этим решениям, а не к типовому шаблону.

Страницы запуска продуктов Apple - иерархические сетки в дикой природе. Hero-элемент получает непропорционально много места, второстепенный контент сидит плотными кластерами, а третичный живет в более узкой колонке ближе к концу. Большие фичеры New York Times, мультимедийные лонгриды с длинным скроллом, - иерархические сетки, спроектированные сцена за сценой. Главная Anthropic использует иерархическую сетку, где доминирует одно утверждение, а все остальное размером подчинено поддержке.

Иерархические сетки требуют больше всего редакторского суждения. Они ломаются, когда дизайнеры используют их как повод пропустить дисциплину колоночной или модульной сетки. Иерархическая сетка - это не «нет сетки». Это сетка, где приоритеты задают геометрию.

Если иерархия неверна, неверна и сетка. Более глубокая логика приоритета разобрана в дизайне визуальной иерархии.

Рукописная сетка - для длинных текстов

Рукописная сетка - это одна колонка. Вот и вся сетка. Один блок текста, бегущий вниз по странице с продуманными полями, выверенной мерой и ничем больше, что конкурировало бы за взгляд.

Книги Stripe Press - рукописные сетки на бумаге. Страницы документов Notion - рукописные сетки в браузере. Режим чтения Substack, лонгриды Apple Newsroom, материалы Magazine в NYT в одноколоночном режиме - все на одной сетке. Книга умеет выпускать длинное чтение пять веков. Веб догнал ее в тот момент, когда мы перестали пытаться ставить сайдбар рядом с эссе на 4000 слов.

Ограничение - мера, длина строки. Целитесь в 65-75 символов. Шире, и глаз теряет строку при возврате. Уже, и ритм становится рубленым.

Другое ограничение - поля. Щедрые боковые поля не потерянное место, это рамка, которая позволяет глазу читателя расслабиться. Статья глоссария про пустое пространство объясняет, почему эти поля делают реальную работу.

12-колоночная система управляет современным вебом

12-колоночная сетка стала стандартом, потому что 12 - самое делимое из малых чисел. Оно чисто делится на 1, 2, 3, 4, 6 и 12. Этого хватает почти для любого паттерна раскладки маркетингового сайта или продуктового UI без обращения к дробям.

Bootstrap закрепил 12-колоночную сетку для веба в 2011 году и ни разу не извинялся за этот выбор. Утилиты сетки Tailwind по умолчанию идут на 12 колонок. Адаптивная сетка Material Design, сетка Carbon Design, Polaris от Shopify - все 12-колоночные. Выбор не случаен, это математика.

Вот полевой справочник по 12 колонкам, который большинство команд либо используют, либо плохо изобретают заново:

• 12 hero на всю ширину, баннер, футер, контент от края до края
• 8 + 4 основной контент с сайдбаром, канонична оболочка продуктового приложения
• 6 + 6 двухколоночные блоки контента, маркетинговые ряды фич, секции сравнения
• 4 + 4 + 4 карточки по три, тарифы, трехколоночные сетки фич
• 3 + 3 + 3 + 3 логотипы по четыре, сетки команды, галереи изображений
• 9 + 3 контент с тонкой мета-колонкой, частый случай в редакционных макетах
• 2 + 8 + 2 центрированный контент с воздухом, используется на детальных маркетинговых страницах

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

Базовый ритм на экранах, а не только на бумаге

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

Фокус в том, чтобы думать вертикальными единицами, а не пикселями. Выберите базу в 8 пикселей. Все отступы, поля, line-height и высоты компонентов становятся кратными 8.

Основной текст 16 пикселей с line-height 24 пикселя попадает в ритм. H1 в 48 пикселей с line-height 56 попадает. Внутренний отступ карточки 24 пикселя попадает. Отступ между секциями 96 пикселей попадает. Вся страница становится одним инструментом, настроенным на одну ноту, и глаз проходит по ней без единой запинки.

Linear держит базовый ритм в списке задач. Notion - в читалке документов. Продукт Figma Slides держит ритм и в миниатюрах слайдов, и на холсте редактора. Команды, которые держат ритм, обычно те, кто считает типографику системой, а не переопределением таблицы стилей.

Адаптивные сетки без паники

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

Стандартный подход: 12 колонок на десктопе, 8 на планшете, 4 на мобильном. Раскладка 4 + 8 на десктопе превращается в 4 + 4 на планшете и одну колонку на мобильном. Раскладка 3 + 3 + 3 + 3 по четыре в ряд становится 4 + 4 (два ряда по два) на планшете и 4 + 4 + 4 + 4 (четыре стопкой) на мобильном. Математика последовательна, потому что число колонок падает на ровные доли.

Сайт Stripe - хрестоматийная адаптивная сетка в продакшене. Маркетинговые страницы Linear перестраиваются через три брейкпоинта, и ни одна раскладка не кажется сжатой. Матрица цен Vercel перестраивается, схлопывая сравнение бок о бок в стопку-аккордеон, а это адаптивный трюк, до которого большинство команд так и не доходит: «адаптивность» иногда означает «меняй компонент, а не колонки». Проблема страницы цен подробно разбирает это решение.

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

Эра CSS Grid: инструменты печатного уровня наконец пришли

CSS Grid - первый раз, когда у браузера появился примитив раскладки, равный тому, что печатные дизайнеры умели в 1961 году. До CSS Grid у веб-дизайнеров были float, Flexbox и много терпения. Теперь у нас есть настоящие линии сетки, именованные области, управление промежутками и возможность разложить страницу так, как Мюллер-Брокман разложил бы плакат.

Сдвиг важен, потому что то, что раньше было решением на этапе сборки (сеткой какого фреймворка я пользуюсь), теперь примитив раскладки, встроенный в браузер. display: grid плюс grid-template-columns: repeat(12, 1fr) плюс gap: 24px - это 12-колоночная сетка. Фреймворк не нужен. Утилитарные классы не нужны. Просто CSS делает то, что должен был делать десять лет назад.

Утилиты сетки Tailwind теперь тонкий сахар поверх CSS Grid. Сетка Bootstrap в основном прослойка совместимости для проблемы, которой больше нет. Команды, которые выжимают из CSS Grid максимум, относятся к нему как к инструменту дизайна, а не как к запасному варианту для Flexbox.

Редактор Linear использует CSS Grid для раскладки панели задач. Веб-редактор Figma использует его для обвязки холста. Vercel использует его на большей части маркетингового сайта. Инструмент в наборе, вопрос в том, пользуется ли им дизайн-система или гоняет паттерны 2018 года на инфраструктуре 2026.

Реальные продуктовые сетки, которые стоит изучить

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

Linear держит плотную колоночную сетку в оболочке приложения, 12-колоночную сетку на маркетинговом сайте и базовый ритм на обоих. Список задач, вид проекта, панель документов - все привязано к одной вертикальной и горизонтальной сетке. Сейчас это самая чистая реализация колоночной сетки в продуктовом UI.

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

Stripe - каноническая 12-колоночная сетка на маркетинговой поверхности и модульная сетка в дашборде. Карточки дашборда привязаны к согласованным ширинам, блоки метрик делят высоты, и весь продукт читается как единая композиция на тридцати с лишним экранах. Разбор анти-дашборда охватывает философию, которую реализует эта сетка.

Apple выпускает иерархические сетки на продуктовых страницах, базовый ритм везде и модульную сетку в App Store и Newsroom. Сеточная дисциплина Apple - самое близкое в вебе к швейцарской печатной школе, и большинство продуктовых команд недооценивают, какая доля впечатления от бренда приходится на одну только сетку.

Редакционные сетки: NYT, Figma и Anthropic

The New York Times использует модульную сетку на главной, иерархическую на больших фичерах и рукописную на лонгридах. Одно издание сознательно использует три сетки, переключаясь между ними в зависимости от редакционной задачи. В этом и урок: тип сетки - решение дизайна для каждой поверхности, а не глобальная настройка.

Figma использует колоночную сетку в браузере файлов, модульную в библиотеке команды и кастомную внутри самого холста. Notion выпускает рукописную сетку для документов и модульную для баз данных. Loops и Resend, более новые продукты, дают чистые 12-колоночные маркетинговые сетки и более плотные колоночные в приложении. Сайт Anthropic использует иерархическую сетку, где в каждой секции доминирует одно утверждение, ориентируясь скорее на редакционные макеты, чем на продуктовый UI. Материал про онбординг без онбординга показывает, как сеточная дисциплина проходит в потоки первого запуска, которые часто считают разовыми раскладками.

Когда ломать сетку (намеренно)

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

Продуктовая страница Apple, где hero-изображение выходит за поля, ломает сетку, которая везде в остальном держится плотно. Фичер NYT, где фотография посреди эссе разворачивается на весь экран, ломает сетку, где выше и ниже идут дисциплинированные модули. Главная Anthropic иногда позволяет одной цитате стоять вне оси в два раза крупнее ожидаемого, и прием работает, потому что все вокруг застегнуто на все пуговицы.

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

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

Сетка - это бренд, даже когда на нее никто не указывает

Если убрать цвета, шрифты и образы из любого продукта, упомянутого в этой статье, сетки все равно остались бы узнаваемыми. Сетка Linear все равно ощущалась бы как Linear. Сетка Stripe - как Stripe. Сетка - самый глубокий артефакт бренда, который выпускает продукт, потому что именно ее пользователь чувствует, ни разу осознанно не увидев.

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

FAQ

В чем разница между колоночной и модульной сеткой?

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

Почему 12-колоночная сетка - стандарт?

12 - самое делимое из малых чисел. Оно чисто делится на 1, 2, 3, 4, 6 и 12, что покрывает почти любой паттерн раскладки (на всю ширину, половины, трети, четверти, шестые) без дробей. Bootstrap закрепил его в 2011 году, Tailwind поставляет его по умолчанию, и каждая крупная дизайн-система после этого повторила выбор, потому что математика есть математика.

Нужен ли мне CSS-фреймворк, раз есть CSS Grid?

Для раскладки нет. display: grid с grid-template-columns: repeat(12, 1fr) и gap - это 12-колоночная сетка в три строки CSS. Фреймворки вроде Bootstrap и Tailwind дают ценность через конвенции компонентов, утилитарные сокращения и единообразие в команде, но сам примитив раскладки теперь функция браузера. Используйте фреймворк, если он ускоряет вашу команду. Не используйте его потому, что думаете, будто он нужен для сеток.

FAQ: как выпускать и ломать сетку

Как удерживать базовый ритм в реальном продукте?

Выберите базовую единицу, обычно 8 пикселей. Сделайте каждый отступ, поле, line-height и размер компонента кратным этой единице. Основной текст 16 пикселей с line-height 24 пикселя.

Заголовки 32, 40, 48 или 56 с line-height 40, 48, 56 или 64. Отступы между секциями 96 или 128. Дисциплина скучная, результат - страница, которая читается как законченный продукт, а не черновик.

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

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

CTA

Если вам нужна команда, которая проектирует сеточные системы как хребет продукта, а не как запоздалую мысль перед запуском, наймите Brainy. Мы выпускаем продукты, где сетка делает работу, бренд читается с одного взгляда, а ритм держится на каждой поверхности. Мюллер-Брокман одобрил бы. Ваши пользователи тоже, даже если никогда не узнают, на какую сетку они смотрят.