Формула для сетки дизайн-макета сайта в Каменске-Уральском

Формула для сетки дизайн-макета сайта в Каменске-Уральском

При создании дизайна адаптивного сайта придется просчитать 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
Формула для сетки
Метод: если по сетке не получается


Правообладатель: агентство интернет-маркетинга KOKOSOV Design+Marketing, город Каменск-Уральский, улица Мичурина, д.1. По вопросам информационного сотрудничества обращайтесь по электронной почте: kamensk-uralsky@mcocos.ru.


Услуги агентства в Каменске-Уральском

Свежее в портфолио:

«Мы долго согласовывали дизайн с центральным офисом в США, но в результате всё было принято. Хорошо, что наши подрядчики постарались как следует и на фотосессии, и на этапе дизайна! »
Карина Хусаинова (Google, Associate Product Marketing Manager). [ Каменск-Уральский ]
«Отличное приложение, есть и меню интерактивное, и программа лояльности »
Матильда Шнурова (Владелец ресторана COCOCO, бывшая жена Сергея Шнурова). [ Каменск-Уральский ]