css中不存在grid-template-width属性，列宽控制必须通过grid-template-columns实现；可用css变量配合transition动态切换其值来实现侧边栏推拉动画。
grid-template-columns 不支持 grid-template-width 这个属性——它根本不存在。你看到的可能是拼写错误、AI幻觉，或把 width 和 grid-template-columns 混用了。
为什么找不到 grid-template-width
CSS Grid 规范中只有 grid-template-columns 和 grid-template-rows，没有 grid-template-width。所有列宽控制都必须通过 grid-template-columns 的值来定义，比如 240px、1fr、minmax(200px, 240px) 等。
- 浏览器会直接忽略任何名为
grid-template-width的声明 - DevTools 中看不到该属性生效，也不会报错（只是静默丢弃）
- 若在预处理器（如 Sass）里误定义了同名变量，也需检查是否被错误地插进了 CSS 声明块而非仅用于计算
用 CSS 变量 + grid-template-columns 实现推拉侧边栏
真正的推拉效果（比如点击按钮展开/收起侧边栏），靠的是动态切换 grid-template-columns 的值，并配合 transition 实现平滑变化。CSS 变量在这里负责存储不同状态下的列宽配置。
- 定义两个变量：
--sidebar-width: 240px（展开态）、--sidebar-collapsed: 60px（收起态） - 主容器用
grid-template-columns: var(--sidebar-width) 1fr，初始设为展开态 - 收起时只需改变量值：
document.documentElement.style.setProperty('--sidebar-width', '60px') - 必须加
transition: grid-template-columns 0.3s ease才有动画；仅改变量不会触发动画，除非该变量被用在可过渡属性上
示例关键代码：
.container {
display: grid;
grid-template-columns: var(--sidebar-width) 1fr;
transition: grid-template-columns 0.3s ease;
--sidebar-width: 240px;
}
.container.collapsed {
--sidebar-width: 60px;
}
常见失效原因：变量没进对的地方
很多人写了变量却没动起来，问题往往出在作用域或覆盖逻辑上：
- 变量写在
.sidebar元素上，但grid-template-columns在父容器上——变量不可继承，必须定义在能被父容器读取的作用域（如:root或容器自身） - 媒体查询里重写了
grid-template-columns，硬编码值会覆盖变量，导致响应式断点下推拉失效 - 用
visibility: hidden或opacity: 0隐藏侧边栏内容，但列宽仍占位——推拉是宽度变化，不是显隐切换 - 忘了给
1fr列加min-width: 0，内容过长时可能撑破布局，掩盖推拉效果
真正要调的是 grid-template-columns 的值，不是造一个不存在的属性。变量只是让这个值更易维护，别让它变成障眼法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
