Is it possible to split a list into two vertical columns using only css

Question

I have the following code:

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
</ul>

I want the following layout:

1 | 5
2 | 6
3 | 7
4 |

So the rule splits the column equally into two columns vertically without requiring a max height.

Answer 1

Try using column-count

ul {
    column-count: 2;
    }