Несколько способов создания колонок в веб-дизайне:
- С помощью плавающих блоков. 1 По умолчанию два блока в нормальном потоке не могут стоять на одной строке, но это поведение можно изменить, прописав обоим свойство float: left | right. 1 Они начнут прижиматься к левому или правому краю. 1
- С помощью таблиц. 1 Таблицы созданы для вывода большого количества ячеек и столбцов, поэтому сделать в них колонки проще всего. 1 Вся их структура задаётся в html-коде. 1
- С помощью флексбокса. 1 Создаётся один общий блок-контейнер, в который помещаются другие блоки, которые нужно сделать в виде колонок. 1 Потом этому контейнеру нужно прописать display: flex. 1
- Разбиение текста на колонки с помощью CSS. 1 В html остаётся один обычный блок, а текст делится на колонки исключительно благодаря CSS. 1 Для этого используются свойства: column-count (задает количество колонок), column-width (задает количество символов текста в одной колонке), column-gap (определяет промежуток между колонками) и column-rule (рисует линию, разделяющую колонки). 1
Также для создания колонок одинаковой высоты можно использовать фиктивные колонки — фоновое изображение, которое повторяется по вертикали. 2 Изображение обычно делается высотой в один пиксел, а его ширина совпадает с шириной макета. 2