Сетки и колонки

Сетка — это невидимый скелет страницы. Её не видно, но без неё всё разъезжается.

«Сетка — это система, внутри которой можно быть свободным».

Сетка (grid) — это набор вертикальных колонок и направляющих, по которым выравниваются элементы. Она делает макет упорядоченным: блоки начинаются и заканчиваются по одним линиям, ничего не «пляшет». В вебе самый ходовой вариант — сетка из 12 колонок, потому что 12 удобно делится на 2, 3, 4 и 6.

Из чего состоит сетка

Колонки — вертикальные полосы для контента. Гаттеры (gutters) — промежутки между колонками. Поля (margins) — отступы от краёв экрана. Контент-блоки занимают несколько колонок: например, статья — 8 колонок, боковая панель — 4.

  12-КОЛОНОЧНАЯ СЕТКА

  |M| 1 2 3 4 5 6 7 8 9 10 11 12 |M|
  |  |█|█|█|█|█|█|█|█|·|·| ·| ·|  |
       контент (8 кол)    сайдбар(4)
   M = поле   между | = гаттер

Адаптивность

На широком экране — 12 колонок, на планшете — например, 8, на телефоне — 4 или вообще одна колонка. Блоки перестраиваются: то, что лежало рядом, на мобильном встаёт друг под другом. Сетка задаёт правила этой перестройки, чтобы макет оставался ровным на любом размере.

  ОДИН МАКЕТ, РАЗНЫЕ ЭКРАНЫ

  desktop:  [ контент ][сайдбар]
  mobile:   [ контент ]
            [ сайдбар ]

Как делают ПЛОХО

Каждый блок поставлен «на глаз»: один отступ 17px, другой 23px, заголовки начинаются с разных позиций. Страница выглядит неаккуратно, хотя по отдельности элементы нормальные.

Как делают ХОРОШО

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

Чек-лист

• Блоки выровнены по единой сетке, а не «на глаз».
• Используется понятная сетка (часто 12 колонок).
• Есть гаттеры и поля, контент не липнет к краям.
• Продумана перестройка под мобильный.

Колонки — лишь горизонталь. По вертикали порядок наводят 8-пунктовая сетка отступов и базовая (baseline) сетка, по которой выравниваются строки текста, чтобы они не «плавали». Почему это вообще важно? Потому что выравнивание создаёт доверие: когда элементы стоят по общим линиям, мозг считывает это как аккуратность и надёжность — даже если зритель не осознаёт, на чём держится ощущение «дорого».

Сетки бывают разными. Фиксированная имеет постоянную ширину и центрируется — проще контролировать, но пустеет на больших экранах. Резиновая тянется за окном — гибкая, но требует аккуратных ограничений по ширине строки. А брейкпоинты — это точки, где макет перестраивается: например, 12 колонок на десктопе сворачиваются в одну на телефоне.

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

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

Итог

Сетка — это дисциплина, которая экономит силы. Один раз задали систему колонок — и каждый новый блок встаёт на место сам.

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