Как сделать CSS колонки: примеры с текстом и изображением

Рассмотрим как сделать CSS колонки (w3.org). Пару ссылок о поддержке браузерами:
-moz- для Firefox, -webkit- для Chrome и Safari, Опера и IE10 без префиксов. Не все свойства поддерживаются, поэтому я их буду опускать. Содержание будет перетекать из одного столбца в другой, при этом высота блока будет автоматически сбалансирована.

columns: ширина количество; 

columns: column-width column-count;

Пример:

<p style="columns: 3; -moz-columns: 3; -webkit-columns: 3;">содержимое</p>

или

<p style="column-count: 3; -moz-column-count: 3; -webkit-column-count: 3;">содержимое</p>

Удобно применение @media, которое установит для разрешения экрана до 400 пикселей только одну колонку:

<style type="text/css">
.kolonka {
  columns: 3;
  -moz-columns: 3;
  -webkit-columns: 3;
}

@media (max-width: 400px) {
.kolonka {
  column-count: 1;
  -moz-column-count: 1;
  -webkit-column-count: 1;
  }
}
</style>

<p class="kolonka">содержимое</p>

Нельзя отдельно для каждого столбца задать ширину колонки (column-width), при расчёте её значения нужно учитывать наличие межколоночного интервала (column-gap), поэтому уместнее, если она будет измеряться автоматически.

Для наглядности между колонками можно указать разделитель, синтаксис которого аналогичен border css.

column-rule: толщина стиль цвет;

column-rule: column-rule-width column-rule-style column-rule-color;

<style type="text/css">
.kolonka {
  columns: 3;
  -moz-columns: 3;
  -webkit-columns: 3;
  column-rule: 1px dotted red;
  -moz-column-rule: 1px dotted red;
  -webkit-column-rule: 1px dotted red;
}
</style>

<div class="kolonka">содержимое</div>

Ширина межколоночного интервала (column-gap) по умолчанию равна normal или 1em.

<style type="text/css">
.kolonka {
  line-height: 0;
  columns: 3;
  -moz-columns: 3;
  -webkit-columns: 3;
  column-gap: 0;
  -moz-column-gap: 0;
  -webkit-column-gap: 0;
}

.kolonka img{
  width: 100% !important;
  height: auto !important;
  padding: 0px;
}
</style>

<div class="kolonka">
  <img src="URL_изо_1"/>
  .......
  <img src="URL_изо_15"/>
</div>

В качестве ещё одного образца можно посмотреть на оглавление shpargalkablog.ru, реализация которого описана на этой странице. Для таких тематик, как кулинария будет весьма кстати.

Доп. тему http://shpargalkablog.ru/2013/09/div-gleich-height.html