Почему дизайнеры используют сетку в 12 колонок ( 12 column grid )?

Question

[hermitkermit]

Как я понимаю, смысл такой сетки в том, что есть популярные css-фреймворки, использующие такую сетку (прим. bootstrap), в которых верстальщик может задать определенное кол-во колонок для блоков задуманных дизайнером. Но, по факту, в большинстве дизайнов, ширина блоков совсем не кратна кол-ву колонок. Блоки выступают за gutter'ы или захватывают только часть колонки.
В чем смысл?

Comments

[hermitkermit]

Спасибо.. В общем понял. Если большинство блоков вписываются в сетку, то смысл очевиден, да.

[vaux]

Зачем вы отвечаете на свой же вопрос?

[hermitkermit]

А так нельзя ? : ) На основании предоставленной информации, сделав вывод, я нашел ответ на мой вопрос.
Если кратко, получится так: Почему дизайнеры используют сетку в 12 колонок, если не все блоки в готовом дизайне вписываются в эти сетку? - Потому, что если большая (или хотя бы равная) часть блоков вписывается - то есть смысл пользоваться такой сеткой. Хотя если тут можно несколько отметить, сделаю так.

[Lorri]

hermitkermit: ответ на свой вопрос никакого профита не приносит. А информацию по "решению" можно добавить в конец вопроса.

[hermitkermit]

А какой профит можно получить, кроме решения?
Не очень знаком с системой.

[Толстый Лорри]

hermitkermit: ответы - в ответах, комментарии - в комментариях.

Answer 1

[Алексей Ярков]

Тут почитайте

Answer 2

[GreatRash]

12 колонок потому, что у 12 много делителей: 12/12, 12/6, 12/4, 12/2, 12/1. Бывает ещё 24 колонки, это если дизайнеру не хватает двенадцати.

Answer 3

[Pretor DH]

Смысл в том, что создатели сеточных фреймворков отталкивались от старой табличной верстки. И за ними хвостом тянется куча багов, такого решения - обёртки, клирфиксы... Блочная верстка задуманная в стандарте HTML4 имеет мало общего с тем "высером", что получился в css-фреймворках.

А статья :@yarkov очень полезная, с точки зрения изучения основ верстки. А ещё лучше возьмите каккую нибудь старую книгу по верстке газет, журналов. Там основы верстки описаны исходя из базиса.

P.S. Всегда удивляет HTML, CSS который пишут на фреймворках. Кроме фреймворка получается еще дополнительный файл стилей который длиннее в 2-3 раза за сам фреймворк!! Когда переделываеш эту кашу получается один файл стилей в половину короче только одного фреймворка.

P.S.S. Артем Лебедев очень хорошо выразился по этому поводу.

Comments

[copal]

чет какое-то шлачное высказывание. математически даже законы природы, а следовательно и всего того что мы видим, описано.

[Pretor DH]

Я и говорю, почитать эти описания. Только с самого начала. Математике учат с основ 1+1. И рисовать нужно дизайн, а не верстку по колонкам (получается в основном шлак). Ведь задача верстальщика (инженера) воплотить дизайн в технологичный продукт самым лучшим путем.

К примеру:
Яблокофон - дизайн кал, технологии кал, но зато как шикарно воплощают. И массам нравится дизайн, и думают, что яблокофоны вершина технологий.
А вот китайские поделки прошлого десятилетия дизайн как у яблокофона, технологии те же, а путь их воплощения ужасный. Получается полный шлак.

Answer 4

[Xtray]

Важность сетки: artgorbunov.ru/bb/soviet/20110310

Выбор количества колонок: artgorbunov.ru/bb/soviet/20120307

Сергей Чикуёнок. Вёрстка растягивающихся сайтов
chikuyonok.ru/2010/01/liquid-site-markup

Answer 5

[Фёдор Ананин]

Я не дизайнер, я человек-оркестр. Концепция сайта зарождается у меня в голове и её я же и верстаю.

Я использую две сетки - 12 и 10.

12ти ячеечная сетка позволяет очень удобно в ряд располагать элементы. Если речь идёт об элементах одинаковой ширины, то их можно 1, 2, 3, 4, 6, 12 в ряд. При этом, если у вас в ряду, допустим 4 элемента, очень легко всё сделать так, чтобы на экране поменьше у вас становилось 2 ряда по 2 элемента. При использовании сетки вы соблюдаете масштаб.

Зачем я иногда пользуюсь 10ти ячеечной сеткой? Если мне нужно разместить в ряду 5 или 10 элементов. Но такое бывает крайне редко.

Плюсы:
1) Быстро, просто, удобно.
2) Выдерживается единая размерная сетка, единые размеры отступов.
3) Есть много готовых решений.

Минусы:
1) Зависимость от сетки. Например, если хочется сделать сайдбар с чёткими 300px, то от сетки приходится отказываться или подстраивать 100% ширины сетки = 1000px, а на сайдбар выделять 3 unit'a.