Is it possible to display flexbox items in two rows instead of one?

Question

What I'm trying to accomplish here is, I want to use two rows to display uncertain amount of items. I will use vertical scroll to show overflowed items. If I use below css then it displays the items in one row. I want to know if it's possible to use 2 rows instead of one or if there is any hack to achieve this using flexbox?

.items-list {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

<div class="items-list">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  .......
</div>

I've been trying for hours to find a solution, or an answer if its even possible to do this with flexbox. Any help would be very much appreciated.

Answer 1

You can do this using CSS grid:

.items-list {
  display: grid;
  grid-template-rows: 50px 50px; /* 2 rows of 50px */
  grid-auto-flow: column;  /* a column flow */
  grid-auto-columns:100px; /* each column will 100px of width */
  grid-gap: 5px;
  overflow: auto;
}
.item {
  border:2px solid red;
}

<div class="items-list">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Related question to get another kind of layout: Can I use css-grid to display an unknown number of items, in left-to-right reading order, over two rows?