Не понимаю, что такое модульная сетка?

Question

[Rooly]

Здравствуйте.
Волнует меня один вопрос по по поводу модульной сетки? А что же это вабще такое?

Нашёл в интернете разные противоречивающие определения:

1. Модульная сетка - взаимное расположение основных блоков ( модулей ) макета.
2. Модульная сетка - набор, невидимых направляющий, вдоль которых расположены основные элементы сайта. Здесь я не могу понять одну вещь - если мы говорим о модульной сетке сайта, то мы говорим о невидимых направляющих ( которых, кстати, по здравому смыслу - НЕ ВИДНО ) или о самих модулей?

Прошу помочь, запутался.

Answer 1

[Mercury13]

Первое определение говорит о вёрстке вообще. И даже второе слишком общее. Более-менее правильное такое.

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

Сами направляющие невидимы. Но мы видим границы блока текста, границы картинок, начало или конец одинокой строчки. И глаз радуется, когда эти элементы выстраиваются по горизонтальным и вертикальным линиям. И не просто выстраиваются, а вдруг оказывается, что размер А равен размеру Б.

На ватмане эти направляющие рисовали, потом стирали. На компьютере — они находятся где-то на непечатаемом слое и блоки к ним прилипают.

Всегда следовать модульной сетке? Нет, конечно. Дизайнов разных куча. Где он академичнее, там модули; где закос под что-то неформальное — стараются модули делать там, где пишущий краской на стене действительно сделал бы две вещи одинакового размера. А иногда выровнять одно с другим — это натянуто.

Я бы дал такие правила.
1. Не впихивай невпихуемое. Если не получается выровнять по художественным или техническим причинам — зачем это прокрустово ложе?
2. Не мельчи модуль. Если не видно, что размеры кратны — пропадает смысл.
3. Модуль не обязательно один. Высота картинки и высота строки могут быть некратны, например, если нет обтекания картинок текстом.

Comments

[Rooly]

Когда мы говорим о модульной сетке, то мы имеет в виду направляющие, к которым прикреплены модули? Или о самих модулях, т.е об их взаимном расположении
расположении?

[Rooly]

Для начала мы обрезаем макет на модули, которым привязаны направляющие. Это мы рисуем ВСПОМОГАТЕЛЬНУЮ модульную сетку? Далее по ВСПОМОГАТЕЛЬНОЙ модульной сетке мы рисуем блоки ( составляем композицию ) и получаем уже модульную сетку самого макета? Правильно ли я мыслю?

[Mercury13]

Неверно, тут модуль — просто единица измерения (напоминаю, взято из архитектуры).

Answer 2

[xmoonlight]

Модульная сетка - это разметка (места на странице) для блоков контента.
HTML-блоками можно легко манипулировать, если использовать для этого правильные инструменты: Какие CMS движки для создания landing pages вы используете или знаете?

Answer 3

[Анатолий]

Что-то все в определение полезли. Сетка это чтобы и дизайнер и верстальщик не поубивали друг друга.
В сетке 12 колонок, потому что так изначально было в популярной библиотеке, которой все пользовались: getbootstrap.com/css

Фактически сетка появляется так: Верстальщик говорит, что у него страница сайта разбита на 12 одинаковых частей, и дизайнер может рисовать все что угодно, но это "что угодно", должно соответствовать размерам этих частей, может занимать 3 части, может 4 части, но никак не 3,5 части! Иначе верстальщик будет очень сильно напрягаться, реализовывая это.

Вот пример сетки: Она уже готова и автор показывает ее возможности: flexboxgrid.com

Answer 4

[Rooly]

Спасибо за ответы, стало понятнее что это такое.
Ещё меня один вопрос интересует ---- когда мы строим модульную сетку сайта ( его композицию ), то мы используем другую сетку ( обычно 12 колоночную ). Это "другая" сетка ( т.е 12-колоночная, к которой будут привязаны модули ) будут так сказать "ВСПОМОГАТЕЛЬНОЙ"?

Comments

[xmoonlight]

Дополнения к вопросу для всех - можно заносить в текст вопроса через его правку.

[htmleater]

Всё попробую объяснить проще: изначально понятие модульной сетки возникло в книгопечатании, куда основы попали из архитектуры. Но и там и там всё это изначально строилось по правилам золотого сечения.
Человеческий глаз - штука странная, мы иногда не видим очевидного, но способны и поддаться оптическому обману. Однако почти все безошибочно способны рассмотреть несоответствия золотому сечению, и у почти у каждого, выросшего в европейской традиции или тех, которые соприкасались с ней, эта способность забита в подкорку.
Сетка нужна для того, чтобы минимизировать/избежать таких несоответствий. Т.е. ты располагаешь блоки в соответствии с выбранной сеткой (а они бывают в вебе 3-х видов: кратные 3, 4, и 5). Показывать юзеру эту сетку совсем не нужно, т.к. его глаз и мозг сами справятся. Посему любая сетка является вспомогательным инструментом.