CSS Column: Создание адаптивных и красивых макетов на веб-страницах

CSS column - это свойство, которое позволяет разбить содержимое элемента на колонки. Оно может быть полезно при создании газетных макетов или других макетов, в которых необходимо разбить текст на колонки.

Синтаксис CSS column:

column-count: число; // количество колонок
column-gap: значение; // расстояние между колонками
column-width: значение; // ширина каждой колонки

Пример использования CSS column:

HTML:

  
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed enim ligula, mollis sit amet libero eget, auctor tempor eros. Ut id vehicula lacus. Morbi non enim tempus, commodo justo ut, pharetra ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec at lectus at orci laoreet blandit in eget enim. Vivamus leo odio, sodales a cursus eu, rutrum vel nisi. Aliquam orci augue, mollis a felis in, ornare interdum lectus. Sed amet.

CSS:

.columns {
  column-count: 2;
  column-gap: 20px;
}

В этом примере установлено, что содержимое элемента с классом "columns" будет разбито на 2 колонки, между которыми будет расстояние в 20 пикселей.

CSS column поддерживается всеми современными браузерами и может быть использовано для создания различных стилей макетов веб-страниц.