Многоколоночный текст с помощью свойства CSS column-count

Есть много способов оформить блоки в две колонки, но когда речь идет о многоколоночном тексте, всё намного проще. Для этого есть CSS свойство "column-count", которое определяет количество колонок текста.

CSS свойство column-count

column-count: <число> | auto | initial| inherit

Использование и определение свойства

ЗначениеОписание
<число>Целое число (от 1-го) задающее оптимальное число колонок.
autoЗначение по умолчанию. Количество колонок будет определяться другими свойствами, например, "ширина колонки" (column-width) или "промежуток между столбцами" (column-gap).
initialУстанавливает для этого свойства значение по умолчанию.
inheritНаследует это свойство от своего родительского элемента.

Дополнительные свойства

Расстояние между колонками

column-gap — расстояние между колонками, задаётся числовым значением (например, 2rem / 20px), или значениями normal (стандартное значение, равное 1em), initial (значение по умолчанию), inherit (наследует родительский элемент).

Пример:

  column-gap: 40px;

Оптимальная ширина колонок

column-width — гибкое свойство, которое определяет оптимальную ширину колонок. Используйте column-width как оптимальную ширины для браузера и комфортного просмотра.

Задаётся как в единицах измерения (px, em, rem), так и значениями: auto, length, initial, inherit.

Обратите внимание: если браузер не может вместить хотя бы две колонки с указанной шириной, колонки становятся в один столбец.

Пример:

column-width: 220px;

Разделительная линия

column-rule — свойство указывает разделительную линию между двумя или более колонками, а именно ширину, стиль и цвет.

Ширина линии задаётся как в единицах измерения (px, em, rem), так и значениями: medium, thin, thick, length, initial, inherit.

Стиль линии задаётся значениями none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, initial, inherit.

Цвет линии задаётся кодом цвета hex или RGB, а также значениями none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, initial, inherit.

Пример:

column-rule-color: #ff0000;

Примеры

Допустим, нам нужно сделать две адаптивные колонки текста, которые при разрешении до 720 пикселей (в мобильной версии) будут отображаться не рядом, а не одна под другой.

Для заключаем наш текст (в т. ч. с подзаголовками, списками, картинками и другими элементами) в тег <div class="two-columns"> и задаём ему нужные значения CSS.

HTML

<div class="two-columns">
<h2>What is Lorem Ipsum?</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

<h2>Why do we use it?</h2>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
</div>

CSS

@media (min-width: 721px) {
  .two-columns {
    column-count: 2;
    -moz-column-count: 2; /* Для Firefox */
    -webkit-column-count: 2; /* Для Safari и Chrome */
    -moz-column-gap: 4em; /* Расстояние между колонок для Firefox */
    -webkit-column-gap: 4em; /* Расстояние между колонок для Safari и Chrome */
    column-gap: 4em; /* Расстояние между колонок */
  }
}

Также вам может понадобиться убрать верхний отступ от первого элемента (заголовки имеют стандартный отзыв сверху - при двух колонках его лучше убрать, поставив отступ к самому блоку с колонками).

Обратите внимание: свойство column-count задаёт не точное количество колонок, а оптимальное, как и с свойство column-width задаёт оптимальную ширину колонок. Браузер может игнорировать эти значения, если размер окна недостаточный для заданного количества колонок или их ширины. Это нужно, чтобы сохранить комфортность чтения.

Посмотреть, как работает код можно здесь: codepen.io/andrej-shurygin/pen/mdrOQQE

Браузеры Chrome и Safari понимают эти свойства только с префиксом -webkit, а Firefox только с префиксом -moz. Сочетание этих свойств позволяет нам получить гибкий кроссбраузерный код.

Результат

Текст в две колонки column-count
Текст в две колонки с использованием свойства column-count

Получилось ли у вас сделать многоколоночный текст так, как вы и хотели? Делитесь своими успехами и вопросами в комментариях.

Автор: Андрей Шурыгин

Изучаю Wordpress. Создаю сайты. Пишу этот блог.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *