Как я могу получить тип столбца HTML макет элементов только с CSS (2 столбца, одинаковая высота)

Question

Так что в основном у меня есть любое количество предметов, обычно от 5 до 10 предметов. Я хочу заказать их в 2 столбца одинаковой высоты или как можно ближе к равному (нечетное количество элементов). Например:

1 5
2 6
3 7
4

Что я определенно не хочу, так это то, что зависит от высоты:

1 6
2 7
3
4
5

Я знаю, что могу посчитать длину массива и разделить на два, чтобы получить максимальный индекс для первого столбца, как показано ниже, но я хочу добиться этого только с помощью CSS:

Math.ceil(( ITEMS.length / 2)) - 1; // Input of 9 outputs 4 as the max index

Я пытался использовать Flex и Grid, но не могу заставить что-то работать правильно, но я, скорее всего, просто что-то упустил.

Answer 1

Благодаря смутному комментарию Пита (в хорошем смысле) я понял это.

Пример ниже:

<div class="content-box">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
</div>

.content-box {
  columns: 2 auto;
}

Буквально один лайнер CSS хаха

https://codepen.io/anon/pen/aGByjL