<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<!-- more items -->
</ul>
ul{
width: 100%;
padding: 0 ;
margin: 0;
}
li {
/* default styles */
}
/* If the list has 5 or more items */
li:nth-last-child(n + 5),
li:nth-last-child(n + 5) ~ li {
width: 49%;
display: inline-flex;
flex-direction: column;
}