Алгоритм
Начинаем с определения рабочей области
В случае веба чаще всего ширина холста колеблется от 1024 до 1280 пикселей. Разумеется, ваша задача и идея может стереть эти рамки. А вот высота макета — величина непредсказуема в большинстве случаев. В отличие от полиграфии, веб-страница чаще всего не фиксирована по высоте, и ее собственный контент может ее же и увеличить. Мне кажется, что это совсем не страшно. Сферическая сетка в вакууме никому не нужна, а при больших сплошных объемах контента никто вертикального членения и не увидит, даже если оно соблюдено.

Я ориентирую в своих макетах минимальную ширину на ~980 пикселей, оставляя место для скроллбара.

модульная сетка
Рис 2.1. Определяем рабочую область


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

Здесь мы уже касаемся понятия модуля. Точнее микромодуля. Этим микромодулем мы будем обосновывать большинство небольших расстояний (и больших тоже).

Таким образом, мы получаем прообраз будущей сетки — «зебру». На этой сетке будет лежать весь текст: абзацы, списки, заголовки, иллюстрации, плашки и проч.

В своей практике я чаще всего использую такие параметры для шрифтовой сетки: кегль — 12 пикселей, высота строки — 18 пикселей.

модульная сетка
Рис 2.2. Шрифтовая сетка-«зебра»

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

Примером второго способа выбора ширины модуля — задача например, в размещении в ряд 9 элементов. Тогда, зная ширину всего холста и количество модулей (в этом примере 9) мы с легкостью определим размер модуля.

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

С сеткой работать удобнее, если сразу определить расстояния между модулями — средники или канавки. На помощь с определением ширины средника приходит понятие микромодуля из предыдущего пункта. Ширина средника равна как минимум базовой высоте строки.

Таким образом, расстояния между модулями делаем равным 18 пикселям.

Рассчитать ширину модуля теперь не составит труда. Есть все данные для этого.

Сетка на 6 колонок очень неудобная и некомпактная. Увеличим количество модулей вдвое. Теперь зная то, что у меня 12 колонок, я рассчитал, что ширина колонки будет равна 65 пикселям.

Строим вертикальное членение по полученному значению

веб-дизайн
Рис 2.3. Колонки

Делаем горизонтальное членение
Высоту одного такого пояса берем кратной базовой высоте строки.

Я объединю по 3 строки в один пояс. Просвет между поясами делаем в одну строку, тем самым сохраняем вертикальный ритм.

веб-дизайн
Рис 2.4. Пояса

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

веб-дизайн

модульная сетка

модульная сетка в веб-дизайне
Рис 2.5. Модульная сетка

Регионы
Объединяем модули в регионы, создаем композицию, рисуем

модульная сетка в веб-дизайне
Рис 2.6. Регионы

модульная сетка в веб-дизайне
Рис 2.7. Макет сайта с сеткой…

модульная сетка в веб-дизайне
Рис 2.8. …и без нее

автор Алексей Черенкевич

1. 38 попугаев (Введение)
2. Алгоритм построения модульной сетки. Оптика и геометрия
1. Алгоритм
2. Микромодуль и оптические компенсации
3. Особенности работы с модульной сеткой при разработке «резиновых» сайтов
3. PaperGrid — сетка на бумаге
4. BrowserGrid — сетка в Фотошопе
5. GridBuilder — сетка-камертон в браузере
6. Верстка по сетке: проблемы и решения
7. Список использованной литературы