必须显式声明display: grid，否则所有网格属性无效；Grid是唯一支持二维布局的CSS方案，需通过grid-template-columns/rows定义轨道，gap控制间距，grid-area或grid-column/row精确定位子项。
必须用 display: grid 显式声明容器，否则所有后续设置都无效。 这是绝大多数人卡住的第一步——写了 grid-template-columns 却没效果，根本原因是父元素没设 display: grid。Grid 不是“自动启用”的布局模式，它需要明确激活上下文。
为什么不能用 flex 或 progress 元素
Flex 布局在响应式断点切换时难以保持步骤圆点与连接线的垂直对齐一致性；<progress> 元素只支持线性填充，无法渲染阶梯状节点和中间横线。真正需要的是「每个步骤可独立控制状态 + 横线由伪元素按需生成 + 圆点位置严格对齐」，这只有 Grid 的隐式轨道和列对齐能力能稳定支撑。
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) 怎么选参数
这个写法是响应式阶梯进度条的核心骨架：
-
120px是单个步骤项的最小宽度，确保文字不折行、图标不挤压（移动端临界值） -
1fr表示剩余空间均分，不是固定像素，所以能随容器缩放 -
auto-fit会收起空列，让有内容的步骤项自动撑满整行；换成auto-fill则保留所有列槽位，适合需预占位的场景（比如后端动态注入步骤） - 别漏掉
gap: 1.5rem，它同时控制步骤项之间的水平和垂直间距，比用margin更干净且不影响伪元素定位
如何用 grid-template-areas 实现横/竖流向切换
桌面端要横排、移动端要竖排，硬写两套 grid-template-columns 容易失控。更可靠的做法是语义化定义区域名，再用媒体查询重组：
立即学习“前端免费学习笔记（深入）”；
.steps {
display: grid;
grid-template-areas: "step1" "step2" "step3" "step4";
}
@media (min-width: 768px) {
.steps {
grid-template-areas: "step1 step2 step3 step4";
}
}
.step1 { grid-area: step1; }
.step2 { grid-area: step2; }
.step3 { grid-area: step3; }
.step4 { grid-area: step4; }
这样改起来只动 CSS，HTML 结构完全不动；而且每一步的 DOM 顺序和阅读顺序一致，无障碍支持天然友好。
最容易被忽略的是伪元素连线的边界处理：最后一项的 ::after 必须显式 display: none，否则会在末尾多画一根线；另外所有步骤项的 position: relative 不能少，否则圆点（::before）可能脱离定位上下文。
