方法一：使用grid-column属性

如果你想要改变一个单元格跨越的列数，或者改变它在网格中的位置，你可以使用grid-column属性。

.item {
  grid-column: span 2; /* 这个单元格将跨越两列 */
}

在上面的例子中，.item将跨越两列，这实际上会改变它的宽度，因为它现在占据了更多的网格空间。

方法二：改变网格容器的grid-template-columns

你可以使用JavaScript来动态改变整个网格容器的grid-template-columns，从而间接改变特定单元格的宽度。

// 获取网格容器元素
const gridContainer = document.querySelector('.container');


// 改变网格列的定义，以调整特定单元格的宽度
gridContainer.style.gridTemplateColumns = '1fr 2fr 1fr'; // 假设你想要改变中间单元格的宽度