应使用语义化 配合 table-layout: fixed 与虚拟滚动渲染大数据表格，而非 css grid；grid 适合仪表盘、画廊等二维布局，不适合长列表或业务报表。

直接用 CSS Grid 渲染几千行表格数据，不是“布局没写好”，而是选错了工具——Grid 是为二维结构设计的，不是为长列表或大数据表格服务的。真正高效的做法是：**用语义化 `

` 配合 `table-layout: fixed` + 虚拟滚动，而不是硬套 Grid**。如果必须用 Grid（比如做不规则卡片墙、响应式仪表盘），那得严格遵循性能边界和替代策略。

别把 Grid 当表格用

HTML `

` 天然支持行列语义、表头固定、屏幕阅读器导航和原生可访问性；CSS Grid 没有 ``、``、`scope` 或 `headers` 属性，无法表达数据关系。强行用 Grid 模拟表格，会丢失语义、增加 JS 绑定成本、破坏键盘导航，且滚动时重绘开销更大。

• Grid 适合：仪表盘卡片、图片画廊、表单布局、自适应模块网格
• Grid 不适合：500+ 行×10+ 列的业务数据表、带排序/导出/筛选的报表
• 真要用 Grid 做“类表格”展示，建议限制在 ≤200 条静态数据，且禁用动态列宽、跨行合并、频繁 reflow 操作

Grid 场景下的真实优化手段

若场景确需 Grid（如鸿蒙 Grid、React 中的 Masonry Grid 或自定义卡片流），核心不是“怎么画格子”，而是“怎么少建节点、少算位置、少触发重排”：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

• 用 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) 替代手动计算列数，避免 JS 动态改 template 触发全量重排
• 禁用 grid-auto-rows 动态高度；所有 GridItem 设固定 height 或 min-height，配合 overflow: hidden 防撑破布局
• 动画只用 transform 和 opacity，绝不改 grid-column 或 grid-row
• 用 DevTools 的 Grid Overlay 查看隐式网格行，删掉无用的空行占位

鸿蒙 ArkUI 等原生框架的特别提醒

在 HarmonyOS NEXT 中，Grid + LazyForEach 是标准解法，但前提是不用 columnStart/columnEnd 做动态跨列——它会导致 O(n) 遍历。正确做法是：

• 提前声明不规则项索引，传入 GridLayoutOptions.irregularIndexes
• 设置 cachedCount 缓存 3–5 个可见区域外的 GridItem，防滑动白屏
• 数据源实现 IDataSource 接口，按需提供 getData(index)，而非全量 map 渲染

万行表格，请回归 table + 虚拟滚动

如果你面对的是带分页、排序、导出需求的真实业务表格，别折腾 Grid。正确路径是：

• <table style="table-layout: fixed"> + 显式 <code><col width="120">
• 长文本加 word-break: break-word，图片设 max-width: 100%
• 服务端分页返回 JSON，前端用 DocumentFragment 批量插入，每 500 行让出主线程
• 滚动容器用 virtuoso 或 react-window，预设行高，复用 DOM 节点

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！