必须先设 display: grid，否则 grid-template-areas、grid-column 等属性无效；用 grid-template-areas 配合媒体查询实现横/竖排切换，语义化命名区域更稳定；flex 和 无法满足阶梯状节点与连线的精准对齐需求。
必须先设 display: grid，否则所有 grid-template-areas、grid-column 等属性全无效——这是 90% 的人写不出来进度条或步骤切换的根源。
用 grid-template-areas 切换横排/竖排步骤流
桌面端要横向进度条，移动端要纵向堆叠，硬写两套 grid-template-columns 容易错位、难维护。语义化命名区域才是稳解：
在容器上写：grid-template-areas: "step1 step2 step3 step4"（横排），再用媒体查询切到 "step1" "step2" "step3" "step4"（竖排）。每个步骤元素只需固定声明 grid-area: "step1" 这类值，HTML 结构完全不动。
注意三点：
-
grid-area值必须带英文引号，grid-area: step1（无引号）会失效 - 每行引号内的区域名数量，必须和
grid-template-columns的轨道数一致 - 竖排时，
gap同时控制上下间距，比用margin-bottom更干净，且不影响伪元素连线定位
为什么不能用 flex 或
flex 在响应式断点切换时，很难保证步骤圆点与连接线始终垂直对齐； 只能画一条填充线，无法渲染阶梯状节点 + 中间横线组合。
真正需要的是：每个步骤状态可独立控制（is-active / is-completed）、横线由伪元素按需生成、圆点绝对定位在列中心——只有 Grid 的隐式轨道 + 列对齐能力能稳定支撑。
常见错误现象：::after 连线出现在最后一项右侧，是因为没给末尾项加 display: none；所有步骤项漏掉 position: relative，会导致 ::before 圆点脱离定位上下文。
repeat(auto-fit, minmax(120px, 1fr)) 参数怎么选
这是响应式阶梯进度条的核心骨架，参数不是随便写的：
-
120px是单个步骤项最小宽度，确保移动端文字不折行、图标不挤压 -
1fr表示均分剩余空间，不是固定像素，所以能随容器缩放 -
auto-fit会收起空列，让有内容的步骤自动撑满整行；换成auto-fill则保留所有列槽位，适合后端动态注入步骤的场景 - 别漏
gap: 1.5rem，它同时控制水平与垂直间距，比用margin更可控
最常被忽略的细节：主内容区若内容变长，整个页面会被拉伸，侧边栏和 footer 失去对齐。解决方法是给主区加 min-height: 0 + minmax(0, 1fr) + overflow-y: auto，否则滚动逻辑就失控了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
