如何在GridLayout中动态排列项目？

<div class="grid-container"></div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 定义3列 */
  grid-template-rows: auto; /* 自动调整行高 */
  grid-gap: 10px; /* 设置项目之间的间隔 */
}

.grid-item {
  background-color: #ccc;
  padding: 10px;
}

// 获取.grid-container元素
var container = document.querySelector('.grid-container');

// 动态添加项目
for (var i = 1; i <= 6; i++) {
  var item = document.createElement('div');
  item.classList.add('grid-item');
  item.textContent = '项目 ' + i;
  container.appendChild(item);
}

// 设置项目位置
var items = document.querySelectorAll('.grid-item');
items.forEach(function(item, index) {
  item.style.gridColumn = 'span 1'; // 设置每个项目占据的列数
  item.style.gridRow = 'auto'; // 自动调整行高
});