Зачем нужна модульная сетка
Когда я впервые столкнулся с понятием «модульная сетка«, внутри меня звучал только один вопрос – зачем всё расчерчивать, если и так всё ляжет, что у меня, глаз чтоли нету. Вижу ведь. Вижу конечно. «На глазок» одна ерунда и получалась. Перед тем как написать эту заметку, буквально вчера я перечитал несколько статей про модульные сетки и чтобы любому человеку стало понятно зачем эти сетки нужны – лучше просто обратить внимание на любую газету. В газете есть колонки, две-три, четыре и больше. Все колонки вписаны в схему из незримых линеек с одинаковыми расстояниями друг от друга, при использовании такой разлиновки конечный результат всегда будет выглядить приятнее глазу и его конструкция будет восприниматься как единое целое.
Короче говоря, Ctrl+K, Ищем Guides, grid & Slices и выставляем всё как на картинке (сетка 10х10 Pix) :
А далее – творим уже по правилам Великой Модульной Сетки!
В моем примере модуль – 40х40pix. Расстояние, которое встречается по всему макету. Дизайн сайта на две колонки. Левая часть – фиксированная, правая – «тянется», но расстояние от левой четко определено. Возникает вопрос о горизонтальном ориентировании объектов, чтобы, например, заголовки и пункты мею были на определенных по вертикали расстояниях. Это уже описание стиля css. Текст на всей странице можно сразу задать с требуемым расстоянием, шрифт на 12-14pix хорошо «ложиться» в размер 20px, т.е. в стиле css для всего контента тега <P> можно описать как p {line-height:20px;} И, конечно же, что бы мы делали без margin и padding. margin отдаляет объекты друг от друга, padding указывает расстояние от краев объекта во внутрь. Таким образом мы можем описать любые расстояния всех объектов. Будь то просто картика; нумерованный или bullet-список, DIV или ячейки в таблице.
