При создании дизайна адаптивного сайта придется просчитать 24-колоночную сетку под bootstrap для максимального разрешения
Выдано в печать 2015-02-11
В 95% случаев будет достаточно тех сеток, которые можно найти готовыми у меня на сайте или в интернете. Но нелишним будет рассказать, как сетку просчитать: например, специфика сайта может потребовать больших отступов внутри колонок и так далее. В частности, при создании дизайна адаптивного сайта, который должен быть еще и резиновым, придется просчитать 24-колоночную сетку под bootstrap для максимального разрешения (обыычно 1920px).
В качестве примера возьмем макет шириной 1600px и попробуем сделать восьми колоночную сетку.
Формула такая: Ширина экрана 1600 = 8 * (ширина колонки) + 7 * ( две ширины отступа внутри колонки ).
Отступ внутри колонки обычно 5...10 пикселей; наша задача – подобрать такую величину отступа. При которой ширина колонки из этой формулы будет целым числом.
Например, подставим сюда ширину отступа, равную 6 пикселям; тогда ширина колонки будет равна ( 1600 - 7 * 2 * 6 ) / 8 = 189,5 пикселей. Не подходит. То же самое нас ждет и в случае 7 пикселей. А вот при отступе, равном 8 пикселям, всё намного лучше:
Ширина колонки = ( 1600 - 7 * 2 * 8 ) / 8 = 186 пикселей. Вот таким нехитрым способом можно рассчитывать сетки.
Ещё про сетки в дизайне:
Зачем нужна сетка
Выход за границы
колонок
Правило плотности
Сетка и настроение
Адаптивная сетка
под Bootstrap
Формула для сетки
Метод: если по сетке
не получается
