Как сделать чтобы элементы разбивались на два столбца?

Question

[Ntari]

Допустим я добавляю какие-то элементы, типа:

<div>item1</div>
<div>item2</div>
<div>item3</div>
<div>item4</div>

А на выходе получаю их в два столбца:

item1 item3
item2 item4

Причем столбцов всегда два. И каждый занимает 50% контейнера. Если элементов нечетное количество то пусть в первом будет на один больше. Подскажите как такое сверстать?

Answer 1

[origami1024]

Способ 1. Flex контейнер со свойством flex-wrap: flex, и дивами width:50%.
Если у элементов будут границы или паддинги, то используй box-sizing: border-box, либо width рассчитывается поменьше.
https://jsfiddle.net/byvo7524/1/

Способ 2. Свойство CSS column-count: 2 для родителя дивов.

<div class="wrapper">
  <div>item1</div>
  <div>item2</div>
  <div>item3</div>
  <div>item4</div>
</div>

.wrapper {
  column-count: 2; 
}

https://jsfiddle.net/7L0b6vxq/

У первого варианта лучше поддержка браузерами.

Comments

[zoozag]

В первом случае порядок блоков другой.