CSS
Что такое модульная сетка и для чего она нужна веб-разработчикам и дизайнерам?
Модуль — это прямоугольник с заданной высотой и шириной, который лежит в основе композиции страницы. Делить страницу на модули дизайнеры придумали в середине XX века для того, чтобы упростить и ускорить конструирование макета.
Модульная сетка — это система организации блоков на макете. Она состоит из рядов и колонок (блоков) определенного размера и расположенных в определенной последовательности. Все пространство макета разбивается сначала на равные ряды и колонки (блоки), а затем все элементы сайта (картинки тексты и т.д.) размещают таким образом, что бы размер любого изображения или текста на макете был кратным размеру блока.
Такая система позиционирования блоков упрощает работу: помогает сделать макет пропорциональным, понятным, гармоничным и значительно экономит время.
Стоит упомянуть что, сетки используются не только в дизайне и в веб-разработке при верстки макета сайта, ее так же можно встретить в архитектуре, в интерьерах и в градостроительстве. Во всех этих областях сетки строятся по схожим принципам, связанным со стремлением привнести в расчерчиваемое пространство порядок и гармонию.
Можно ли сверстать сайт без модульной сетки?
Ответ однозначный, конечно да! Но это будет не так удобно, как при использовании модульной сетки. Так как при верстке макета Вы постоянно будите сталкиваться с различными задачами при позиционировании блоков. К примеру, как точно определить одинаковое расстояние между соседними блоками, как определить точный и единый размер блоков, стоящие в одном ряду, что бы они заполняли всю ширину экрана и т.д.
Рассмотрим 12 колоночную сетку, которая чаще всего встречается на сайтах
Ширина модульной сетки равная 100%, которая в свою очередь состоит из 12 колонок.
Получаем следующую формулу, 12 делим на, то количество блоков, которое вам необходимо. К примеру, Вам необходимо сделать на сайте 3 блока одинакового размера и поместить их в один ряд. Следовательно Вы 12 / 3 = 4 (это то число, которое указанно в ячейке). Далее, что бы точно узнать ширину блока в процентах, Вам необходимо (100% / 4 = 25%).
Если необходимо блоки сделать разной ширины
Обратите внимание, как правило при верстке макета, внимание уделяется только ширине блоков, высота подстраивается автоматически в зависимости от контента блоков.