Как 16 колонок преобразовать в 12 колонок 960grid?

Question

[sabanovvv]

Всем привет!
Верстаю с использованием 960грид,использую 16 колонок,при 1600px экрана выводтся по 4 блока в ряд, как при 1200px выводить только 3 блока,при 1024px - 2 блока.
Как такое сделать?Можно ли при изменении шиирны браузера 16 колонок преобразовать в 12 колонок или как то по другому поступить?

test2.webjay.ru

Answer 1

[Michael Danilov]

1 способ кривоватый:
- Через media-выражения изменяете сетку на 12 колоночную, просто поменяв в логике расчёта сеток 16 на 12. Для обратной совместимости .grid_13+ уравниваете с .grid_12.
- Добавляете .visible-large {dispaly: block;} для 1600px+ и .visible-large {dispaly: none;} по дефолту. И вешаете на скрываемые 4ые элементы в строке.

2 способ логичный:
- Делаете свои классы для каждой ширины, как в Foundation или Bootstrap. В итоге у блоков в строке будет что-то типа .col-md-3.col-lg-4, для четвёртых всё тот же способ с видимыми на разных размерах элементами.

Comments

[sabanovvv]

а как ширину задавать?например у меня при 1600px стоит ширина 1600px, а при меньше 1200px какую ширину задать?

[sabanovvv]

не совсем понял про первый способ "Для обратной совместимости .grid_13+ уравниваете с .grid_12."

[Michael Danilov]

первый способ: Полноэкранный пример (Исходник)
На самом деле я сейчас перечитал ваш вопрос и понял, что он не подойдёт для случая при ширине 1024. На то он и кривоватый способ :)

второй способ: Полноэкранный пример (Исходник)

[sabanovvv]

Michael Danilov: чето криво работают,появляются горизонт полосы и т.д.

[Michael Danilov]

У меня в Fx 34 они появляются при ширине окна меньше 1024 пикселя, что логично - этот случай я не обыгрывал.
В каком случае они появляются у вас и почему - я не могу сказать. Возможно ваш браузер не понимает свойство box-sizing и нужны префиксы, тогда последний блок из-за border будет съезжать на новую строку...