Как мне составить список из двух столбцов с помощью CSS / HTML?

Question

Я ищу возможность разместить некоторые элементы на веб-сайте в списке из 2 столбцов.

  <div class="modal-content--dropdown">
    <div class="modal-content--dropdown-header">
      <h5>HEADLINE</h5>
    </div>

    <div style="width:50%, display: inline-block;">1</div>
    <div style="width:50%, display: inline-block;">2</div>
    <div style="width:50%, display: inline-block;">3</div>
    <div style="width:50%; display: inline-block;">4</div>
    <div style="width:50%, display: inline-block;">5</div>
    <div style="width:50%, display: inline-block;">6</div>
    <div style="width:50%; display: inline-block;">7</div>
  </div>

если я добавлю элементы (которые имеют ширину 50% и встроены), они Покажите в этом порядке

1   2
3   4
5   6
7  

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

1   5
2   6
3   7
4

У кого-нибудь есть подход, как я мог бы достичь этого? я знаю, как сделать это вручную, но клиент должен иметь возможность добавлять элементы самостоятельно, не сортируя их вручную, это должно происходить автоматически. в конце список будет представлен в алфавитном порядке.

Заранее благодарим за любой совет:)

Answer 1

вы можете использовать column-count:

Свойство column-count CSS разбивает содержимое элемента на указанное количество столбцов.

---

пример с ol для демонстрации

ol {
  column-count: 2;
}

li:before {
  content: 'Item';
}

<div class="modal-content--dropdown">
  <div class="modal-content--dropdown-header">
    <h5>HEADLINE</h5>
  </div>

  <ol>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ol>
</div>

Answer 2

Это самая безумная вещь, которую я когда-либо писал, но я считаю, что она точно соответствует требованиям. Когда происходит переполнение, он перемещает один элемент вправо и продолжает течь.

#list{
  display: flex;
  height: 80px;
  writing-mode: vertical-lr;
  flex-wrap: wrap;
}

#list > div{
  padding: 5px;
  transform: rotate(-90deg);
}

<div>
  <div>
    <h5>HEADLINE</h5>
  </div>
  <div id="list">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>
</div>