고도가 다른 내용을'좋은 느낌'으로 동적으로 보여주고 싶어요!창고가 없어요!

<div id="grid">
</div>

#grid {
  display: grid;
  grid-auto-rows: 20px;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
}

.item {
  min-width: 80px;
  margin-left: 8px;
  margin-top: 8px;
  box-sizing: border-box;

  background: green;
  color: white;
}

let index = 1;
const addItem = () => {
  const height = randomNum();
  const grid = document.querySelector('#grid');
  const item = document.createElement('div');
  item.setAttribute('class', 'item');
  item.setAttribute('style', `height: ${height}px;grid-row: span ${Math.ceil(height / 20)};`);
  item.innerHTML = index;
  index += 1;
  grid.appendChild(item);
}

const randomNum = () => {
  const min = 40;
  const max = 200;
  return Math.floor(Math.random() * (max - min + 1) + min)
}

window.addEventListener('load', () => {
  for (let i = 0; i < 10; i++) {
    addItem();
  }
  document.querySelector('#addItemButton').addEventListener('click', () => {
    addItem();
  })
})

const addItem = () => {
  const height = randomNum();
  const grid = document.querySelector('#grid');
  const item = document.createElement('div');
  item.setAttribute('class', 'item');
  item.setAttribute('style', `height: ${height}px;grid-row: span ${Math.ceil(height / 20)};`);
  item.innerHTML = index;
  index += 1;
  grid.appendChild(item);
}

item.setAttribute('style', `height: ${height}px;grid-row: span ${Math.ceil(height / 20)};`);