Разделение неупорядоченного списка на колонки в HTML

Быстрый ответ

Для построения двухколоночной разметки маркированного списка прибегнем к CSS-свойству column-count:

ul { column-count: 2; }

Тогда ваш HTML-код будет представлен так:

<ul>
  <li>Элемент 1</li>
  <li>Элемент 2</li>
  <li>Элемент 3</li>
  <li>Элемент 4</li>
</ul>

Такой подход позволяет разделить список на две колонки с равномерной расстановкой элементов.

Используем возможности современного CSS

Кроме column-count, CSS предоставляет большой арсенал средств для создания многоколоночных макетов без потери семантической правильности кода.

Макет сетки как освобождение от проблем

Использование сеточного макета — элегантный и практичный современный подход к созданию разметки:

ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Двухколоночная сетка для равномерного распределения */
  justify-content: start; /* Выравнивание элементов по левому краю контейнера */
  grid-auto-flow: column; /* Элементы автоматически размещаются в колонках */
}

Этот метод идеально подходит для адаптивных макетов.

Визуализация

Вид нашего двухколоночного маркированного списка можно представить следующим образом:

Мороженое (🍦) с двумя сортами рядом:

Сорт Шоколад (🍫) в первом стакане: [* Шоколад *, * Шоколад *, * Шоколад *]
Сорт Клубника (🍓) во втором стакане: [* Клубника *, * Клубника *, * Клубника *]

В одноколоночной верстке это выглядит так:

🍦
🍫 Шоколад
🍫 Шоколад
🍫 Шоколад
🍓 Клубника
🍓 Клубника
🍓 Клубника

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

🍦🍦
🍫 Шоколад     🍓 Клубника
🍫 Шоколад     🍓 Клубника
🍫 Шоколад     🍓 Клубника

Каждая колонка равномерно расставляет элементы, формируя идеальное сочетание компонентов.

Подробнее об этом расскажет наш спикер на видео

Адаптивный дизайн и поддержка старых браузеров

При применении современных решений необходимо обеспечить адаптивность дизайна и совместимость со старыми версиями браузеров. Воспользуйтесь float: left в комбинации с заданной шириной элементов:

ul li {
  float: left; /* Элементы списка выстраиваются в ряд */
  width: 50%; /* Каждый элемент занимает половину доступного пространства */
  list-style-position: inside; /* Маркеры списка располагаются внутри контейнера */
}

Преобразование списка в две колонки при помощи JavaScript

Для браузеров, не поддерживающих CSS Grid или column-count, возможно использование JavaScript для выполнения манипуляций с DOM-деревом:

var $list = $('ul');
var listItems = $list.children('li');
var listLength = listItems.length;
var middle = Math.ceil(listLength / 2); /* Разделим список на две части */

/* Создание второй колонки при помощи JavaScript */
$list.after($list.clone().addClass('column-two'));

$('.column-two').html('');
listItems.each(function(i){
  $(this).appendTo(i < middle ? $list : $('.column-two')); /* Разбивка элементов по колонкам */
});

Таким образом, список пополам делится и элементы распределяются по обеим колонкам.

Полезные материалы

1. Полное руководство по Flexbox | CSS-Tricks — построение гибких двухколоночных макетов.
2. Использование многостолбцовых макетов | MDN — применение многостолбцовых макетов.
3. Пример на W3Schools — эмуляция и демонстрация многоколоночных маркированных списков.
4. Свойство columns | CSS-Tricks — разбор основ многоколоночного форматирования.
5. Разъяснение Flexbox | Smashing Magazine — подробный разбор Flexbox.
6. Практическое использование CSS Grid | A List Apart — применение CSS Grid в реальных проектах с ценными примерами и советами.