Форматировать список элементов со столбцами

У меня есть длинный список предметов:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <!-- various number of items -->
</ul>

Как я могу отобразить этот список со столбцами? Сначала заполнение столбцов.

Item 1 | Item 5
Item 2 | Item 6
Item 3 | Item 7
Item 4 |

Количество колонок также должно быть переменным (для адаптивной верстки).

Я использую фреймворк TailwindCSS.

Используете ли вы bootstrap или любой другой CSS-фреймворк?

— 18.12.2020 18:57

Фреймворк TailwindCSS

— 18.12.2020 18:58

html css flexbox tailwind-css

18.12.2020 18:54

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

ul{
display:inline-block;
column-count:2;
column-gap:10vw;
list-style-type:none;
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <!-- various number of items -->
</ul>

Я думаю, что это имеет низкую поддержку браузера. Есть ли другой способ сделать это с помощью сетки?

— 18.12.2020 19:16

поддержка столбцов была добавлена в chrome 50. Теперь мы используем chrome версии 88. Думаю, вам хорошо идти туда

— 18.12.2020 19:19

18.12.2020 19:00