как сделать второй ряд <li>

const input = document.getElementById('input'); 
const list = document.getElementById('list'); 
const items = []; 
const maxItems = 8; 
 
addItem = () => { 
  const value = input.value; 
 
  if (value) { 
    const item = document.createElement('li'); 
 
    item.className = 'item'; 
    item.innerHTML = value; 
 
    if (items.length < maxItems) items.push(item); 
    else { 
 
    } 
 
    list.innerHTML = ''; 
 
    for (const el of items) { 
      list.innerHTML += el.outerHTML; 
    } 
  } 
}

#list { 
  border: 1px solid black; 
  box-sizing: border-box; 
  display: flex; 
  flex-wrap: wrap; 
  justify-content: space-between; 
  list-style: none; 
  margin: 10px 0 0; 
  padding: 5px 7.5px 10px; 
  width: 300px; 
} 
 
#list>.item { 
  border: 1px solid black; 
  flex-grow: 1; 
  margin: 5px 2.5px 0; 
  overflow: auto; 
  padding: 5px; 
  width: calc(25% - 20px); 
}

<input id="input" type="text" /> 
<button type="button" onclick="addItem()">Button</button> 
<ul id="list"></ul>

var arr = []; 
var arrList = ""; 
isHobbies = function() { 
  var str = document.getElementById('hobbies'); 
  var theStr = str.value; 
  if (arr.length < 8) arr.push(theStr); 
  document.getElementById("str").innerHTML = ""; 
  for (var i = 0; i < arr.length; i++) { 
    arrList = "<li>" + arr[i] + "</li>"; 
    document.getElementById("str").innerHTML += arrList; 
  } 
}

#str { 
  border: 1px solid black; 
  box-sizing: border-box; 
  display: flex; 
  flex-wrap: wrap; 
  justify-content: space-between; 
  list-style: none; 
  margin: 10px 0 0; 
  padding: 5px 7.5px 10px; 
  width: 300px; 
} 
 
#str>li { 
  border: 1px solid black; 
  flex-grow: 1; 
  margin: 5px 2.5px 0; 
  overflow: auto; 
  padding: 5px; 
  width: calc(25% - 20px); 
}

<input id="hobbies" type="text" /> 
<button type="button" onclick="isHobbies()">Button</button> 
<ul id="str"></ul>

var arr = []; 
var arrList = ""; 
isHobbies = function() { 
  var str = document.getElementById('hobbies'); 
  var theStr = str.value; 
  arr.push(theStr); 
  document.getElementById("str").innerHTML = ""; 
  for (var i = 0; i < arr.length; i++) { 
      arrList = "<li>" + arr[i] + "</li>"; 
      document.getElementById("str").innerHTML += arrList; 
  } 
}

.interes { 
  column-count: 4; 
  overflow: hidden; 
  width: 300px; 
  max-height: 2.4em; 
  line-height: 1.2; 
}

<div class="hob"> 
  <label for="hobbies">Интересы</label> 
  <input type="text" id="hobbies" placeholder="Ваш интерес?" name="" value=""> 
  <input type="button" id="addHobbies" name="" value="Добавить интерес" onclick="isHobbies()"> 
  <div id="str" class="interes"> 
  </div> 
  </div>