Limit the number of rows per column before creating a new column with css

Question

Having a list of items, the element should show 2 elements per column. If there are more elements, it should create a new column.

Example:

test0  test2
test1  test3

If there are 3 elements:

test0  test2
test1  

If there are 2 elements:

test0
test1

This is the code I have tried:

<div class="container">
  <div>test0</div>
  <div>test1</div>
  <div>test2</div>
  <div>test3</div>
</div>

.container {
  display: flex;
  max-lines: 2;
}

Answer 1

CSS grid can do that:

.container {
  display: grid;
  grid-template-rows:auto auto;
  grid-auto-flow:column;
  border:1px solid;
  margin:5px;
}

<div class="container">
  <div>test0</div>
  <div>test1</div>
  <div>test2</div>
  <div>test3</div>
</div>


<div class="container">
  <div>test0</div>
  <div>test1</div>
  <div>test2</div>
</div>


<div class="container">
  <div>test0</div>
  <div>test1</div>
</div>


<div class="container">
  <div>test0</div>
</div>