How to make items split into two columns?

Question

css

Let's say I add some elements like:

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

And at the output I get them in two columns:
item1 item3
item2 item4
And there are always two columns. And each occupies 50% of the container. If there are an odd number of elements, then let the first one have one more. Tell me how to make it?

Answer 1

Method 1 . Flex container with flex-wrap: flex property and width:50% divs.
If the elements will have borders or paddings, then use box-sizing: border-box, or the width is calculated smaller.
https://jsfiddle.net/byvo7524/1/
Method 2 . CSS property column-count: 2 for the parent of the divs.

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

.wrapper {
  column-count: 2; 
}

https://jsfiddle.net/7L0b6vxq/
The first option has better browser support.