本文介绍一种纯 css 方案，利用 grid-auto-flow: dense 与列定位技巧，将两类动态数量的元素（如 .item1 和 .item2）在单列中严格交替显示（item1 → item2 → item1 → item2…），无需 javascript 或 html 结构改造。
本文介绍一种纯 css 方案，利用 grid-auto-flow: dense 与列定位技巧，将两类动态数量的元素（如 .item1 和 .item2）在单列中严格交替显示（item1 → item2 → item1 → item2…），无需 javascript 或 html 结构改造。
在实际开发中，我们常遇到需将语义不同但数量相等（或接近）的元素——例如“标题组”与“内容组”、“奇数项”与“偶数项”——按顺序交错渲染为单列列表的需求。原代码尝试用 grid-template-areas 固定区域映射，但该方式要求 HTML 中元素顺序与视觉顺序一致，而当前 DOM 是先排完所有 .item1、再排所有 .item2，导致无法自然交替。
核心思路：放弃预设区域，转而利用 Grid 的自动流（grid-auto-flow）与显式列分配，让两类元素“抢占同一行的不同列”，再通过 dense 模式回填空位，最终借助 grid-template-columns: 0 auto 技巧隐藏首列，实现视觉上的单列交替效果。
✅ 推荐方案：CSS Grid + auto-flow: dense（无 JS，响应式友好）
.grid-container {
display: grid;
grid-template-columns: 0 auto; /* 第一列宽度为0（不可见），第二列为实际内容列 */
grid-auto-rows: 2lh; /* 行高基于行内高度，自适应文字大小 */
grid-auto-flow: dense; /* 启用密集填充：允许后续项目回填前面的空缺 */
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.item1 {
grid-column: 2; /* 所有 .item1 强制放入第2列（可见列） */
grid-row: auto; /* 默认按顺序分配行 */
}
.item2 {
grid-column: 2; /* 同样放入第2列 */
align-self: end; /* 关键！使 .item2 垂直靠下对齐，配合 dense 触发重排 */
}
<div class="grid-container"> <div class="item1">1</div> <div class="item1">11</div> <div class="item1">111</div> <div class="item1">1111</div> <div class="item2">2</div> <div class="item2">22</div> <div class="item2">222</div> <div class="item2">2222</div> </div>
? 为什么有效？
- grid-template-columns: 0 auto 创建了两列：第1列宽度为 0（视觉上不可见），第2列为实际内容区；
- 所有 .item1 和 .item2 都被指定到第2列（grid-column: 2），本应垂直堆叠；
- 但 .item2 添加了 align-self: end，Grid 在布局时会为其预留“底部对齐空间”，结合 grid-auto-flow: dense，浏览器会主动将 .item2 尽可能上移，插入 .item1 之间的空隙，从而形成交替视觉流；
- 2lh 行高确保每行有足够基础高度，避免内容挤压，且随字体缩放自适应。
⚠️ 注意事项与替代建议
- 动态数量兼容性：该方案天然支持不等量数据（如 5 个 .item1 + 3 个 .item2），多余项将自然接续在末尾，仍保持交替起始逻辑；
- 可访问性提示：视觉交替 ≠ DOM 顺序交替，屏幕阅读器仍按源码顺序读取。若语义强依赖交替结构（如步骤说明），建议同时用 aria-order 或重构 HTML 顺序；
-
Flexbox 替代方案（更直观但需 JS 辅助排序）：
若追求语义与视觉完全一致，可先用 JS 按需重组 DOM（如 Array.from(items1).flatMap((a, i) => [a, items2[i]])），再用 Flex 单列布局：.flex-container { display: flex; flex-direction: column; gap: 10px; }但违背“纯 CSS”前提，仅作延伸参考。
✅ 总结
本文提供的 Grid 密集流方案，以极简 CSS 实现了动态元素的类名驱动交替布局，兼具简洁性、可维护性与响应式潜力。它巧妙绕过 grid-template-areas 的静态限制，转而利用 Grid 引擎的自动填充机制达成视觉目标——是现代 CSS 布局思维的一次典型实践。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
