[SOLVED] How to move list-items to a new column if they extend past the height of the container?

How to move list-items to a new column if they extend past the height of the container?

I have a list where I'd like to build two columns from. The list can have a variable amount of items in it, but a max. of 8

I always want the first column to have 4 elements. I already tried column-count: 2 but this does not work fine on an uneven number, because the first row must contain 4 elements.

.container {
  border: 1px solid red;
  width: 300px;
  height: 90px;
}

<div class="container">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</div>

Solution

You can do this using Flexbox:

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 300px;
  height: 200px;
}
li {
  height: 25%;
}

<div class="container">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
  </ul>
</div>