如何在CSS Grid中实现响应式的步骤条引导布局？-css教程-PHP中文网

步骤条容器必须显式声明 display: grid，否则 grid-template-columns 无效；推荐用 grid-template-areas + 媒体查询实现响应式流向切换；连线应通过伪元素和 grid 隐式轨道控制；intro.js onchange 中只更新状态类名，由 css 控制样式。

如何在css grid中实现响应式的步骤条引导布局？

步骤条容器必须用 `display: grid` 显式声明

很多人写完 grid-template-columns 却发现布局没变，根本原因是漏掉了这一步。Grid 不是“自动生效”的布局模式，父容器必须明确设为网格上下文，否则子元素仍按普通流排列。步骤条这类线性结构尤其容易被误当成 Flexbox 场景去处理——但 Flex 无法天然支持“跨断点自动重排列+垂直对齐+固定间距”三者兼顾。

推荐起步写法：

.introjs-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1.5rem;
}

注意：gap 同时控制列间距和行间距，比用 margin 更干净；1fr 是比例单位，不是像素，这是响应式的基础。

用 `grid-template-areas` + 媒体查询切换步骤流向

移动端步骤条常需竖排（节省水平空间），桌面端横排（利用宽度、增强可读性）。硬编码两套 grid-template-columns 容易失控，更稳妥的方式是定义语义化区域名，再通过媒体查询重组结构。

示例写法：

.introjs-steps {
  display: grid;
  grid-template-areas:
    "step1"
    "step2"
    "step3"
    "step4";
}
<p>@media (min-width: 768px) {
.introjs-steps {
grid-template-areas: "step1 step2 step3 step4";
}
}</p><p>.step1 { grid-area: step1; }
.step2 { grid-area: step2; }
.step3 { grid-area: step3; }
.step4 { grid-area: step4; }</p>

要点：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

grid-template-areas 每行用引号包裹，空格分隔列，点（.）表示空单元格
所有区域名必须在子元素上通过 grid-area 显式声明，否则不匹配
移动端优先时，从单列写起，再用 @media (min-width) 提升，避免覆盖逻辑混乱

步骤节点的高亮与连线要脱离文档流控制

Intro.js 默认高亮会叠加遮罩层，但步骤条中的“连线”（progress line）常因 Grid 自动计算高度/位置而错位。不能靠 position: absolute 硬调，那样在不同屏幕下极易断裂或偏移。

正确做法是把连线作为伪元素注入到步骤容器中，并用 Grid 的隐式轨道控制其位置：

.introjs-steps::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: #ccc;
  z-index: 1;
}
<p>.introjs-steps > * {
position: relative;
z-index: 2;
}</p>

关键点：