Формула для сетки

Мой курс
По дизайну сайтов

В 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
Формула для сетки
Метод: если по сетке не получается


Задай вопрос

по дизайну сайтов,
я отвечу за 24 часа

или
Приложи файл

Приложи файл с картинкой, если требуется

×