Отличительной особенностью полиграфического дизайна является повсеместное применение колоночной верстки. И тому есть веские основания.
Во-первых, глаз лучше воспринимает строки текста состоящие из 8 до 12 слов. Во-вторых, можно гораздо лучше организовать колонки и уменьшить количество пустого пространства на странице. Долгое время это являлось исключительным преимуществом полиграфии. В вебе же приходилось всячески извращаться. Но теперь CSS3 позволяет создавать многоколоночную верстку без использования JavaScript.
Колоночная модель
Спецификации W3C определяют несколько новых свойств, позволяющих задавать колонки в HTML-верстке. Теперь как и в полиграфии можно задать ширину колонок, их количество и даже некоторые правила поведения.
Существенным в спецификации является то, что у колоночного элемента должны быть явно указаны значения количества колонок и/или количество колонок. Браузеры должны отображать колоночные элементы образом схожим с отображением таблиц, но содержимое будет распределяться по колонкам динамически.
На настоящий момент, нет возможности определять свойства отдельных колонок (например, цвет отдельной колонки). Будем надеяться, что после того, как все текущие предложенные в реализацию свойства будут реализованы, появятся и свойства управления колонками.
Количество и ширина колонок
Для создания колоночного элемента необходимо задать свойства сolumn-count и/или column-width.
column-count
По-умолчанию, column-count имеет значение auto. Т.е. если задать column-width, браузер самостоятельно вычислит количество колонок необходимое для отображения многоколоночного элемента. Такое поведение не всегда удобно, потому зададим количество колонок, в которых находится контент.
.column
{
-webkit-column-count:2;
-moz-column-count:2;
}
column-width
Как сказано выше, можно задать ширину колонок не указывая количество колонок, а браузер вычислит его динамически. Ширину колонок можно указывать любыми единицами измерения доступными в CSS: em, px, %.
.column
{
-webkit-column-width:15em;
-moz-column-count:15em;
}
Конечно же можно комбинировать column-width и column-height:
.column
{
-webkit-column-count:2;
-moz-column-count:2;
-webkit-column-width:15em;
-moz-column-width:15em;
}
Интервалы и линейки
Полиграфические дизайнеры привыкли работать в терминах колонок и интервалов. Веб-дизайнеры же в основном думают в терминах границ и отступов.
Полная версия статьи доступна на habrahabr.ru