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

1-ый способ: указанное число колонок

Разделить контент на указанное число колонок можно через свойство column-count.

.columns {
  column-count: 3;
  column-gap: 20px;
  column-rule: 1px solid #CCC;
}

Пример кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut dapibus arcu. Suspendisse eros mi, auctor sit amet ultricies ac, dignissim consequat erat. Nam vehicula convallis diam, quis mattis dui tempus nec. In sit amet ipsum lorem. Fusce lacinia consequat ullamcorper. Donec fermentum lorem at ligula semper bibendum. Proin elementum sapien a purus egestas eget vehicula dui venenatis. Nam hendrerit, nunc et faucibus sollicitudin, nulla erat malesuada nibh, sed consectetur enim nulla euismod nisi.

Параметр column-gap определяет расстояние между колонками.

За работу колонок отвечает стандарт «CSS Multi-column Layout».

2-й способ: автоматическое число колонок

Если указать параметр column-width (без указания кол-ва колонок через параметр column-count), то контент автоматически разделится на несколько колонок с указанной шириной.

.columns {
  column-width: 200px;
  column-gap: 20px;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut dapibus arcu. Suspendisse eros mi, auctor sit amet ultricies ac, dignissim consequat erat. Nam vehicula convallis diam, quis mattis dui tempus nec. In sit amet ipsum lorem. Fusce lacinia consequat ullamcorper. Donec fermentum lorem at ligula semper bibendum. Proin elementum sapien a purus egestas eget vehicula dui venenatis. Nam hendrerit, nunc et faucibus sollicitudin, nulla erat malesuada nibh, sed consectetur enim nulla euismod nisi.