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

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

<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

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

Раскрытие чувствительных данных

Все внешние компоненты, рассмотренные здесь до сих пор, взаимодействуют с клиентской стороной. Однако, если они подвергаются атаке, они не...

Разница между тегами Br и Wbr в HTML 5

В целом, оба тега <br> и <wbr> имеют свои уникальные цели и функциональные возможности, и их использование зависит от конкретных требований к дизайну...

HTML И VS CODE Для Веб-разработки

Прежде чем начать кодировать html в "VS CODE", мы должны сначала создать папку и назвать ее x.html, здесь я принимаю x как имя файла, который мы...

Как использовать WAI-ARIA

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

Статическая веб-страница, созданная с помощью CSS и HTML - до и не до.

Я потратил некоторое время на создание своего сайта-портфолио. Затем, гордясь собой, я разместил свой код на серверах amazon. Мне потребовалось время,...

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

Ответы 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