VS Code智能提示中grid-row-gap等CSS属性显示删除线无法生效

原因 #

grid-row-gap和grid-column-gap是CSS Grid布局早期的属性，目前已被标准废弃。尽管部分浏览器仍保留兼容支持，但现代CSS规范已统一使用row-gap（对应原grid-row-gap）和column-gap（对应原grid-column-gap），VS Code显示删除线就是在提示该属性已过时。

解决办法 #

1. 替换为标准属性
   直接用row-gap替代grid-row-gap，column-gap替代grid-column-gap，功能与效果完全一致，代码示例：

/* 原代码 */
.grid-container {
  grid-row-gap: 15px;
  grid-column-gap: 20px;
}

/* 替换后代码 */
.grid-container {
  row-gap: 15px;
  column-gap: 20px;
}

2. 使用简写属性gap
   可以用更简洁的gap复合属性同时设置行、列间距，示例：

/* 分别设置行间距15px、列间距20px */
.grid-container {
  gap: 15px 20px;
}

/* 只写一个值，行列间距统一为15px */
.grid-container {
  gap: 15px;
}

3. 兼容老旧浏览器（如IE11）
   如果必须兼容非常老旧的浏览器，可以同时声明新旧属性，旧浏览器优先识别grid-row-gap/grid-column-gap，新浏览器则使用标准属性，示例：

.grid-container {
  grid-row-gap: 15px;
  row-gap: 15px;
  grid-column-gap: 20px;
  column-gap: 20px;
}

注：这种情况下VS Code仍会给旧属性标删除线，但不影响实际功能生效。

内容的提问来源于stack exchange，提问作者AnimeK