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

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.

Параметр 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.

Группировать

Допустим есть элемент, часть которого переносится на следующую колонку.

Если надо переносить элементы цельно, то это можно сделать через свойство page-break-inside.

.columns ul {
  list-style-position: inside;
}

Результат: