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

Сначала надо понять, какие константы есть в предстоящем дизайне. Обычно это максимальная ширина содержания (например 996 пикселей). Иногда появляется боковой банер, например 240 пикселей,— это вторая константа. С постоянными определились, можно начинать.

Модульная сетка в вебе — это по сути колонки равной ширины. А как же межколоночные расстояния (по английски — gutters), спросите вы? В какой-то момент я понял, что в веб-дизайне они излишни, так как создают доволнительные сложности и не отражают структуры ЦСС. Если представить колонку и межколоночное расстояние как «див» с внутренним отступом, то это гораздо удобнее, чем «большая колонка» и «маленькая колонка».

Перейдём к проектированию. Структура информации может быть простой и сложной. Мы рассмотрим сложную структуру, чтобы понять, как работает сетка.

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

В этих случаях придётся делить страницу на 2, 4, 6, 12 и, возможно, даже большее количество колонок. Давайте попробуем найти число, которое позволит это сделать. Мой полуматематичский мозг предполагает, что это 24: оно кратно 2, 3, 4, 6, 8, 12. Супер.

Поняв, что 24 колонки — это удобно и помогает разнообразно располагать содержание, мы попробуем вместить наши константы в это число колонок. Как поделить 990 пикселей (наша максимальная ширина) на 24, если не получается ровного количества пикселей? Надо подобрать такой целый множитель для 24, чтобы произведение было не больше 990 пикселей и как можно ближе к желаемой ширине. Хорошо, но не обязательно, если наша вторая константа будет тоже кратная этому числу.

Итак, деление 990 на 24 даёт 41 с чем-то пиксель: не подходит, полупикселей не бывает. Попробуем ближайшие целые значения: 40 × 24 = 960, 41 × 24 = 984, 42 × 24 = 1008. Последнее (1008) отметаем — слишком широко. Остаётся выбрать между 41 и 40. Оба варианта годятся, но с цифрой 40 работать легче, да и ширина нашего банера (240) отлично делится на это число — ровно шесть колонок, четверть всей сетки.