CSS3 Multi-columns

Свойство multi-column позволяет разбивать контент (текст и блоки) на несколько колонок для "перетекания" текста между несколькими колонками.

Посмотреть примеры разметки в живую вы можете в конструкторе колонок: http://ie.microsoft.com/testdrive/graphics/hands-on-css3/hands-on_multi-column.htm

Фиксированная ширина колонок. * Количество колонок ограничивается шириной родителя.

.content { column-width: 13em }

Фиксированное количество колонок:

.content { column-count: 3 }

Отступ между колонками:

.content { column-gap: 5px }

Разделитель колонок:

.content { column-rule: 1px solid #333 }

Растянуть внутренний элемент между всеми колонками (не поддерживает Firefox 29):

.content h1 { -webkit-column-span: all }

Режим распределения контента (по умолчанию balance):

.content { column-fill: auto } /* auto | balance */

* Не понимаю для чего нужен auto...

Пример

Разметка

<article>
    <h1>Title spans across all columns</h1>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</article>

CSS

article {
  margin: 100px auto; width: 50%; height: 40%; 
  padding: 5px; border: 1px solid #ccc;
}
article {
    -webkit-column-count: 3;
    -webkit-column-rule: 1px solid #ccc; /* вертикальная линия между колонками */
    -webkit-column-gap: 2em; /* ширина отступа между колонками */

    -moz-column-count: 3;
    -moz-column-rule: 1px solid #ccc;
    -moz-column-gap: 2em;
}
article .item {
    width: 100%;
    height: 50px;
    background-color: #8edd80;
    margin-bottom: 5px;
    display:inline-block; /* чтобы не срезало блоки */
}
article h1 {
    -webkit-column-span: all; /* Not support FF29 */
}

Результат

Пример перетекания inline блоков между 3-мя колонками

#css3, #multi-columns, #grid