用 grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) + gap 实现等宽步骤指示器最稳妥，自动适配步数变化；连接线用容器伪元素 +inset-block: 50% 居中绘制；ie11 降级用 inline-block+text-align: justify 配合隐藏：:after 撑开。
如何用 CSS Grid 实现等宽步骤指示器
直接说结论：用 grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) + gap 是最稳的等宽方案，不是靠 flex 均分，也不是手动写死列数。
原因很简单：步骤数量常变（3 步、5 步、7 步），硬写 grid-template-columns: 1fr 1fr 1fr 会卡死扩展性；而 auto-fit 能自动收缩 / 扩张列数，同时保证每列宽度一致且填满容器。
- 别用
repeat(3, 1fr)—— 步骤一增就溢出或换行错乱 - 别依赖
justify-content: space-between—— 容器缩放时两端对齐会拉大间隙，破坏“等宽”本意 -
minmax(100px, 1fr)中的100px是最小宽度阈值，防止小屏下文字挤成一团；1fr才是真正实现均分的关键
怎么画连接线？伪元素比绝对定位更可靠
连接线本质是“步骤之间”的视觉引导，常见错误是给每个步骤项加 position: relative 再用 ::after 画线——结果是最后一项也画线，或者响应式下线偏移。
正确做法是把线画在容器上，用 grid-column 控制起止位置，配合 ::before 伪元素 + background 或 border。
立即学习 “ 前端免费学习笔记（深入）”；
- 给步骤容器设
position: relative，伪元素用absolute横向铺满，再用inset-block: 50%;居中 - 线长度由
width: calc(100% - var(--step-width));控制，其中--step-width是单个步骤宽度（可用clamp()动态算） - 避免用
transform: translateX()微调——不同字体渲染下像素对不齐，线头会露白边
IE 不支持 Grid？别 fallback 到 Flex，改用 display: inline-block + text-align
真要兼容 IE11，display: grid 必须降级，但用 display: flex 会丢失等宽控制能力（IE 的 flex: 1 行为和现代浏览器不一致），实际表现是宽度参差。
更稳妥的是回归老派：display: inline-block + 容器 text-align: justify + 伪元素撑开最后一行。
- 每个步骤项设
vertical-align: top和固定width（如width: 20%），靠text-align: justify强制分散对齐 - 必须加一个隐藏的
::after在容器末尾，content: ""+display: inline-block+width: 100%，否则justify不生效 - 这种方案在 IE11 下宽度误差 table 更轻量、更可控
为什么 border-bottom 不适合做连接线？
有人图省事，给每个步骤项加 border-bottom: 2px solid #ccc，指望它连成一线——结果是线条断开、粗细不均、圆角接不上。
根本问题是：border 是绘制在元素自身盒模型边缘的，两个相邻元素的 border 永远存在物理间隙（哪怕 margin/padding 为 0），且无法统一控制起始 / 终止位置。
- 多列 Grid 下，中间项的
border-bottom会和左右项重叠或留缝，尤其开启 subpixel 渲染时更明显 - 圆角步骤图标（如
border-radius: 50%）会让 border 线头变成椭圆弧，接不直 - 暗色主题切换时，border 颜色需同步改多个地方，维护成本高；而伪元素线只需改一处
background-color
连接线不是装饰，是流程语义的一部分。画不准，用户就会怀疑“这步是不是没走完”。
