应放弃传统，用CSS Grid实现响应式多列数据表：设容器display: grid，grid-template-columns: repeat(auto-fill, minmax(240px, 1fr))，小屏降为1fr；动态渲染时按“项”组织数据，由CSS自动排列。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
用 CSS Grid 实现响应式多列数据表
纯 HTML <table> 在展示多列数据时容易横向溢出、难以适配移动端，真正实用的多列数据展示应放弃传统表格语义，改用 <code>display: grid 控制布局。Grid 能按列数自动分栏，且支持跨行、对齐、响应式断点控制。
常见错误是强行给 <table> 加 <code>overflow-x: auto —— 这只解决“看全”，不解决“易读”和“缩放错位”问题。
- 定义容器为
display: grid，用grid-template-columns: repeat(auto-fill, minmax(240px, 1fr))实现等宽自适应列 - 每条数据用
<article></article>或<div class="item"> 包裹，避免语义混乱<li>在小屏下（如 <code>@media (max-width: 768px)）设为grid-template-columns: 1fr，强制单列 - 注意：不要给子项设固定宽度，否则会破坏
minmax()的弹性行为 - 容器设
display: flex; flex-wrap: wrap - 子项设
flex: 0 0 calc(33.333% - 12px)（3 列，含间隙），间隙用margin而非gap（IE 不支持） - 用
box-sizing: border-box防止 padding/border 破坏宽度计算 - 移动端可直接覆盖为
flex: 0 0 100%实现单列 - 假设数据是数组
items，直接遍历生成itemEl并 append 到容器 - 避免用
innerHTML += ...，每次都会触发重排，性能差 - 若需服务端渲染 fallback，可用
<template></template>标签预存结构，用content.cloneNode(true)复用 - 注意：动态插入后，Grid/Flex 容器会自动重排，无需手动干预
- 如果项目已重度依赖 Bootstrap，可仅借用其断点类（如
d-md-flex），样式仍用自定义 Grid - 禁用
col类的padding，用g-*（gap）替代，避免嵌套 margin 冲突 - 别把
<tr><td> 套进 <code>col—— 语义冲突 + 可访问性降级最常被跳过的细节是可访问性：Grid/Flex 布局丢失了
<table> 的原生表头关联（<code>scope/headers），若数据有强行列关系（比如财务报表），得用role="table"+aria-label补充，否则屏幕阅读器无法理解结构。
用 Flexbox 做简单等分布局（适合固定列数）
如果明确只要 3 列或 4 列，且不需复杂响应逻辑，display: flex 更轻量、兼容性更好（IE10+）。但它无法像 Grid 那样自动换行并保持列宽一致，需手动控制 flex-basis 和 flex-wrap。
典型翻车场景：忘了加 flex-wrap: wrap，导致子项被压缩或溢出；或在移动端没重置 flex-basis，造成列宽失衡。
立即学习“前端免费学习笔记（深入）”；
数据来自 JSON 时怎么动态渲染多列结构
用 JavaScript 渲染多列布局时，别用字符串拼接 <table> —— 既难维护又违背现代 DOM 操作习惯。应先生成结构化元素，再用 <code>documentFragment 批量插入。
容易忽略的是：不同列数下，每行的“逻辑分组”可能变化（比如 4 列时第 5 条是第二行第一列，但 2 列时它是第三行第一列），所以不要按“行”组织数据，而应始终按“项”组织，让 CSS 决定排列。
为什么不用 Bootstrap 的 col-* 类做多列表格
Bootstrap 的栅格系统本质仍是 float 或 flex 模拟，它在多列数据展示中存在两个硬伤：一是列数必须提前写死（如 col-md-4 表示 3 列），无法根据内容长度自动调节；二是默认带 padding 和 max-width，容易导致列宽不均或文字换行异常。
更实际的问题是：当数据项高度不一致时，Bootstrap 的列会因清除浮动失效而错位，而 Grid 的 grid-auto-rows 或 Flex 的 align-items: stretch 才能真正对齐底部。
