Почти уверен, что вы не знаете этого свойства.
Время от времени возникает задача расположить список или текст в две колонки. Годы идут, CSS развивается, поколения верстальщиков сменяют поколения, но свои костыли люди как делали, так и делают. Мало кто знает, но в CSS появилось свойство
column-count, позволяющее задать количество колонок для списка или текста. Также есть свойство
column-width, которое задаёт минимальную ширину для колонки,
column-rule, отрисовывающее линию между колонками словно border,
column-gap, задающее расстояние между колонками и
columns, объединяющее в себе column-width и column-count.
Разберемся на примерах из жизни. Простой пример: нужно сделать так, чтобы список располагался в две колонки.
Добавим следующий CSS-код:
ul {
column-count: 2;
}
В результате получим это:
Просто, не правда ли? А теперь посмотрим на немного более сложный пример. Итак, наши клиенты - люди с планшетами. Наше веб-приложение похоже на газету и листать её нужно слева направо, а не вниз, как остальные сайты. Текст должен располагаться в три колонки на экран. Общее количество колонок неизвестно, также, как и количество текста.
Из задания лишь понятно, что высота приложения должна быть равна высоте экрана пользователя, а за раз на экране должно быть отображено три колонки. Для начала, создадим контейнер, который бы занимал весь экран и имел прокрутку слева направо.
.overflow-container {
/* занимает 100% высоты экрана */
height: 100vh;
/* показывает горизонтальный скролл в том случае, если он нужен */
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: 2em;
column-rule: 1px solid #ccc;
}
Посмотрим, что получилось: запустить пример
Если вы видите не три колонки, значит, по мнению вашего браузера, ширины окна недостаточно для размещения трёх колонок текста. Установите column-width немного меньше, поэкспериментируйте и получите приемлемый для вас результат.
Эту и другие статьи можно почитать в моём практическом руководстве HTML Practice: https://artik-man.github.io/HTML-Practice/ Если у вас возникли идеи для новой главы этой книги, присылайте issue на GitHub: https://github.com/Artik-Man/HTML-Practice/issues
