<button onClick="addItem()">Add new item</button>

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
.item {
  background: skyblue;
  text-align: center;
  border: 1px solid black;
}

button {
  margin-bottom: 10px;
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
  grid-gap: 10px;
}
function addItem() {
  const element = document.querySelector('.container');
  element.innerHTML += `<div class='item'>${element.childElementCount}</div>`
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.