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

12-колоночная сетка — это «миллиметровка» веб-дизайнера. Она делится на половины, трети, четверти и шестые — поэтому из неё собирается почти любой лейаут.

«Сетка — это не клетка, а ритм. Её нарушают осознанно, а не от незнания».

Почему 12, а не 10? Потому что 12 делится на 1, 2, 3, 4 и 6. Это значит, что одну и ту же сетку можно разложить на две колонки по 6, три по 4, четыре по 3 или шесть по 2 — без дробных значений. 10 так не умеет.

Три части сетки

  12 КОЛОНОК = ГИБКОЕ ДЕЛЕНИЕ
  ---------------------------
  |1|2|3|4|5|6|7|8|9|10|11|12|   12 колонок

  [    6     ][     6      ]      2 блока (1/2 + 1/2)
  [  4   ][  4   ][   4    ]      3 блока (трети)
  [ 3  ][ 3 ][ 3 ][   3    ]      4 блока (четверти)
  [   8        ][    4     ]      контент + сайдбар

В современном CSS 12-колоночная сетка строится на Grid буквально в две строки:

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;                /* гаттеры */
}

/* контент 8 колонок + сайдбар 4 */
.content { grid-column: span 8; }
.sidebar { grid-column: span 4; }

Сетку не обязательно заполнять «под завязку». Можно занять 8 из 12 колонок и оставить воздух — это нормальный приём, а не ошибка.

Разбор глубже: сетка как договор о выравнивании

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

Делимость 12 — это не суеверие, а инженерное удобство. Дизайн постоянно требует деления пространства: две колонки поровну, три карточки в ряд, четыре фичи, контент плюс узкий сайдбар. На сетке из 12 все эти раскладки выражаются целыми числами колонок (6+6, 4+4+4, 3×4, 8+4) и используют одну и ту же систему гаттеров. Сетка из 10 спотыкается уже на трёх колонках. Именно поэтому Bootstrap, Material и большинство фреймворков стандартизировались вокруг 12 — это наименьшее удобное число, покрывающее почти все реальные деления.

Современный CSS Grid сделал важную вещь: сетка перестала быть только «бумажным» инструментом дизайнера и стала исполняемой. Раньше дизайнер рисовал сетку в макете, а верстальщик воспроизводил её вручную флоатами и процентами, неизбежно теряя точность. Теперь repeat(12, 1fr) в коде — это буквально та же сетка, что на макете, и блоки занимают колонки командой span. Это резко сократило разрыв между дизайном и кодом: то, что нарисовано по сетке, по сетке же и собирается.

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

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

Каждый блок ставят на глаз, без общей сетки — края колонок не совпадают от секции к секции, и страница «дрожит». Или жёстко прибивают ширины в пикселях, и при изменении окна всё ломается.

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

Все блоки выровнены по единой 12-колоночной сетке: левые края совпадают по вертикали через всю страницу. Ширины заданы в долях (fr / span), а не в фиксированных пикселях, поэтому лейаут тянется.

Чек-лист

• Есть единая сетка (обычно 12 колонок) на весь макет.
• Гаттеры и поля одинаковы по всему проекту.
• Края блоков совпадают по вертикали между секциями.
• Ширины — в долях, а не в жёстких пикселях.
• Незаполненные колонки (воздух) — осознанный приём.

Итог. 12 колонок делятся на половины, трети и четверти, поэтому из них собирается почти любой лейаут. Grid + repeat(12, 1fr) превращает сетку из чертежа в код за две строки.