How do I force the column to display in the next row?

Question

I have more than five to six column it will increase in the future. I have to display each row with three column. So how do I force the column to display in the next row? I set parent class display: table and child class display:table-cell because I have to display the equal height of the column.

I am getting the output like this

I need output like this.

.table {
  display: table;
  border-collapse: separate;
  border-spacing: 30px 0px;
  width: 100%;
}

.row { display:table-row;width: 100%; }

li{
  display:table-cell;
  padding:5px;
  background-color: gold;
  width: 33.33%;
  text-align: center;
}

<div class="table">
    <ul class="row">
        <li>Cell 1</li>
        <li>Cell 2</li>
        <li>Cell 3</li>
        <li>Cell 4</li>
        <li>Cell 5</li>
        <li>Cell 6</li>
    </ul>
</div>

Answer 1

I prefer this one as well. You can see here: JSFiddle

* {
  box-sizing: border-box;
}
.table .row {
  display: flex;
  flex-wrap: wrap;
  list-style:none
}

.table .row li {
  background: orange;
  width: 33%;
  text-align: center;
  line-height: 100px;
  border: 5px solid white;
}

.table + .table li {
  background: olive;
}

<div class="table">
    <ul class="row">
        <li>Cell 1</li>
        <li>Cell 2</li>
        <li>Cell 3</li>
        <li>Cell 4</li>
        <li>Cell 5</li>
        <li>Cell 6</li>
    </ul>
</div>

<div class="table">
    <ul class="row">
        <li>Cell 1</li>
        <li>Cell 2</li>
        <li>Cell 3</li>
        <li>Cell 4</li>
    </ul>
</div>