方法一：使用grid-column屬性

如果你想要改變一個(gè)單元格跨越的列數(shù)，或者改變它在網(wǎng)格中的位置，你可以使用grid-column屬性。

.item {
  grid-column: span 2; /* 這個(gè)單元格將跨越兩列 */
}

在上面的例子中，.item將跨越兩列，這實(shí)際上會(huì)改變它的寬度，因?yàn)樗F(xiàn)在占據(jù)了更多的網(wǎng)格空間。

方法二：改變網(wǎng)格容器的grid-template-columns

你可以使用JavaScript來動(dòng)態(tài)改變整個(gè)網(wǎng)格容器的grid-template-columns，從而間接改變特定單元格的寬度。

// 獲取網(wǎng)格容器元素
const gridContainer = document.querySelector('.container');


// 改變網(wǎng)格列的定義，以調(diào)整特定單元格的寬度
gridContainer.style.gridTemplateColumns = '1fr 2fr 1fr'; // 假設(shè)你想要改變中間單元格的寬度