Flexbox vs CSS Grid: Unknown Number of Items

Flexbox vs CSS Grid: Unknown Number of Items by Wes Bos

HTML

<link rel="stylesheet" href="https://cdn.rawgit.com/wesbos/css-grid/master/assets/style.css">
<button onClick="addItem()">+ Add</button>
<div class="unknown">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

CSS

.unknown {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(75px, 1fr));
}

Babel + JSX

function addItem() {
  const unknown = document.querySelector('.unknown');
  unknown.innerHTML += `<div class="item">${unknown.childElementCount}</div>`;
}