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

Время от времени возникает задача расположить список или текст в две колонки. Годы идут, CSS развивается, поколения верстальщиков сменяют поколения, но свои костыли люди как делали, так и делают. Мало кто знает, но в CSS появилось свойство
column-count, позволяющее задать количество колонок для списка или текста. Также есть свойство
column-width, которое задаёт минимальную ширину для колонки,
column-rule, рисующее линию между колонками словно border,
column-gap, задающее расстояние между колонками и
columns, объединяющее в себе column-width и column-count.

Разберемся на примерах из жизни. Простой пример: нужно сделать так, чтобы список располагался в две колонки.

<ul>
  <li>Lorem</li>
  <li>ipsum</li>
  <li>dolor</li>
  <li>sit</li>
  <li>amet</li>
  <li>consectetur</li>
  <li>adipisicing</li>
  <li>elit</li>
</ul>

Добавим следующий CSS-код:

ul {
  column-count: 2;
}

В результате получим это:

Просто, не правда ли? А теперь посмотрим на немного более сложный пример. Итак, наши клиенты - люди с планшетами.Наше веб-приложение похоже на газету и листать её нужно слева направо, а не вниз, как остальные сайты. Текст должен располагаться в три колонки на экран. Общее количество колонок неизвестно, также, как и количество текста.

Из задания лишь понятно, что высота приложения должна быть равна высоте экрана пользователя, а за раз на экране должно быть отображено три колонки.Для начала, создадим контейнер, который бы занимал весь экран и имел прокрутку слева направо.

.overflow-container {
  height: 100vh;      /* занимает 100% высоты экрана */
  overflow-x: auto;   /* показывает горизонтальный скролл в том случае, если он нужен */
  overflow-y: hidden; /* скрывает вертикальный скролл даже если он нужен */
}

Теперь определим стили для текста. Мы понимаем, что так как колонки должно быть три, то каждая колонка должна иметь ширину 1/3 от ширины страницы.Это означает, что ширина колонки должна быть 100vw/3. Но число 33.333333vw не очень красиво выглядит. А свойство column-width задаёт именно минимальную ширину колонки. То есть, ширина колонки всегда будет подбираться автоматически, однако, минимальная ширина будет такой, какой мы её зададим. Давайте зададим ширину колонки в 30vw - это ровное число, которое меньше 33.3333vw.

.col-3 {
  column-width: 30vw;
}

И добавим немного стиля. К примеру, расстояние между колонками и тонкую серую линию между ними.

.col-3 {
  column-width: 30vw;
  column-gap: 2vw;
  column-rule: 1px solid #ccc;
}

Посмотрим, что получилось: