Вывод текста в две, три, четыре колонки (CSS Multiple Columns)

Вывод текста в две, три, четыре колонки, адаптивный вывод текста и разбивка контента на странице (вывод информации, картинок с текстом). Для достижения данного результата веб-разработчики использовали дополнительные библиотеки, плагины jQuery, PHP скрипты, которые делили контент страницы на блоки. Указанные методы можно назвать устаревшими и мало используемыми. Их используют в отдельно взятых случаях (исключительных). В настоящий момент для верстки страниц широко используется CSS Multiple Columns. CSS Multiple Columns — это CSS модуль, который определяет порядок вывода контента на странице, разделяя его на столбцы, по заданным правилам.
С помощью всего нескольких правил CSS вы можете создать гибкий макет страницы сайта, который по мере того, как страница сайта становится меньше или больше, столбцы автоматически регулируются и адаптируются под заданную ширину страницы.

Многоколоночные свойства CSS

— column-count
— column-gap
— column-rule-style
— column-rule-width
— column-rule-color
— column-rule
— column-span
— column-width

Количество столбцов column-count

Свойство column-count указывает количество столбцов, на которые должен быть разделен элемент.

div {
  column-count: 2;
}

Расстояние между столбцами column-gap

Свойство column-gap указывает зазор между столбцами.

div {
  column-gap: 20px;
}

Стиль между столбцами column-rule-style

Свойство column-rule-style определяет стиль правила между столбцами.

div {
  column-rule-style: dashed;
}

Значения column-rule-style:

column-rule-style: none;
column-rule-style: hidden;
column-rule-style: dotted;
column-rule-style: dashed;
column-rule-style: solid;
column-rule-style: double;
column-rule-style: groove;
column-rule-style: ridge;
column-rule-style: inset;
column-rule-style: outset;

Сокращенная запись column-rule

Свойство column-rule является сокращенным свойством для установки всех вышеперечисленных свойств column-rule-*.

div {
  column-rule: 1px dashed #cccccc;
}

Охват столбцов column-span

Свойство column-span указывает, сколько столбцов должен охватывать элемент.

h1 {
  column-span: all;
}

Значения column-span:

column-span: none;
column-span: all;

Ширина столбцов column-width

Свойство column-width указывает рекомендуемую оптимальную ширину столбцов.

div {
  column-width: 250px;
}