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

ul {
  column-count: 2;
}

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

Answer 2

Try using column-count

ul {
    column-count: 2;
    }

Answer 3

Basically it's like this:

ul {
    column-count: 4;
    column-gap: 20px;
}

See an old fiddle: http://jsfiddle.net/pdExf/ Source: Is there a way to break a list into columns?

Answer 4

column-count is your friend.

In your case the following CSS should suffice:

ul {
    column-count: 2;
}

See https://developer.mozilla.org/en-US/docs/Web/CSS/column-count for further details.