有没有办法让一个通过for循环生成的按钮跨越两列

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

.button-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 将容器分为两列 */
  grid-gap: 10px; /* 设置列之间的间距 */
}

var buttonContainer = document.querySelector('.button-container');

for (var i = 1; i <= 10; i++) {
  var button = document.createElement('button');
  button.textContent = '按钮 ' + i;
  buttonContainer.appendChild(button);
}