如何像depart.name一样设置网格的列数据索引

<div class="grid-container">
  <div class="grid-item" data-column-index="0">Item 1</div>
  <div class="grid-item" data-column-index="1">Item 2</div>
  <div class="grid-item" data-column-index="2">Item 3</div>
  <!-- 更多项 -->
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 假设有3列 */
}

.grid-item {
  /* 样式定义 */
}

// 获取所有带有data-column-index属性的元素
const items = document.querySelectorAll('.grid-item');

// 遍历元素并读取其data-column-index属性
items.forEach(item => {
  const columnIndex = item.getAttribute('data-column-index');
  console.log(`Item ${item.textContent} is in column ${columnIndex}`);
  
  // 可以根据索引执行特定操作，如改变样式
  if (columnIndex === '1') {
    item.style.backgroundColor = 'yellow';
  }
});

function updateColumnIndexes() {
  const items = document.querySelectorAll('.grid-item');
  items.forEach((item, index) => {
    item.setAttribute('data-column-index', index);
  });
}

// 在添加或删除项后调用此函数