CSS Grid 是实现 ol 双列布局的最优解：设 display: grid、grid-template-columns: 1fr 1fr、grid-auto-flow: column，确保编号连续且语义正确；响应式可用媒体查询降级为单列，避免 column-count、Flexbox 或浮动等方案带来的错位与可访问性问题。
用 CSS Grid 实现 ol 双列网格布局最直接
Flexbox 不适合真正意义上的“双列网格”——它只能把 li 水平或垂直线性排列，无法让第 1、3、5… 项自动落左列，2、4、6… 落右列。Grid 才是原生支持这种二维分布的方案。
核心做法是给 ol 设 display: grid，并用 grid-template-columns: 1fr 1fr 定义两列，再配合 grid-auto-flow: column 让列表项按列优先顺序填充：
ol {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-flow: column;
gap: 0.5em;
}
-
grid-auto-flow: column是关键：它让浏览器不再按 HTML 顺序逐行填满第一列再填第二列，而是“先填满第一列，再填第二列”，从而实现真正的双列流式布局 - 不要用
flex-wrap: wrap+flex-direction: column模拟——那样会导致li高度不一致时列高错位，且无法保证编号连续性（ol的计数器仍按 DOM 顺序工作，视觉错位但语义正确） - 若需响应式降级为单列，加媒体查询：
@media (max-width: 768px) { ol { grid-template-columns: 1fr; } }
column-count 能凑合用，但会破坏编号逻辑
用 column-count: 2 确实能让 ol 视觉上分两栏，但它本质是“多列文本流”，不是网格布局。问题很实际：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 编号仍按 DOM 顺序渲染，但视觉上可能变成：左栏显示 1、2、3，右栏显示 4、5、6——这看起来正常；可一旦某
li内容很长、触发换行，就可能左栏出 1、3、5，右栏出 2、4、6，编号和内容完全错位 -
column-count不控制每列宽度，只按容器宽度平均切分，无法指定“左列固定 200px，右列自适应”这类需求 - IE11 支持
column-count，但不支持grid；不过现代项目已极少需要兼容 IE11，优先选 Grid
别碰 float 或 inline-block 模拟双列
给每个 li 设 float: left 或 display: inline-block 并手动控制宽度，看似能排两列，但实际踩坑密集：
-
ol的默认counter-reset和counter-increment机制会被打断，编号可能重复、跳号或丢失 - 父容器高度塌陷风险高，尤其当
li高度不均时，必须额外加clearfix或overflow: hidden - 响应式切换困难：从双列切单列时，
float元素不会自动堆叠，得重写整套规则 - 移动端小屏下极易因空格/换行符导致
inline-block项之间出现不可控间隙
真正容易被忽略的点：语义与可访问性
用 Grid 布局时，ol 的 DOM 顺序和语义没变，屏幕阅读器仍按 1→2→3→4 顺序读取，这是好事。但如果你用 JS 动态重排 li 位置（比如把偶数项插入右列），就会破坏语义流——编号没错，可读取顺序乱了。坚持用 grid-auto-flow: column，让浏览器自己按源顺序填列，既简洁又保语义。另外，别给 ol 加 role="list" 或覆盖 list-style 后忘了用 aria-label 补充说明，否则视障用户可能不知道这是个有序列表。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
