不合理。GitHub提交热力图本质是网格状色块集合，非二维数据表，用table会导致语义错误、响应式困难、键盘导航异常，且阻碍hover动效与SVG/Canvas优化；应采用div+CSS Grid或Flexbox实现。
用 table 实现提交热力图的底层结构是否合理？
不合理。GitHub 提交热力图本质是网格状色块集合，不是二维数据表，强行用 table 会导致语义错误、响应式困难、键盘导航异常，且无法自然支持 hover 动效和 SVG/Canvas 渲染优化。真正该用的是 div + CSS Grid 或 Flexbox。
如何用 CSS Grid 模拟 7×52 的提交网格？
核心是固定列数（7 列代表周一到周日），行数动态生成（通常 52 行对应全年周数）。关键点在于：
-
grid-template-columns: repeat(7, 1fr)确保等宽列，不依赖内容撑开 -
grid-auto-rows: 10px控制每格高度，配合gap: 2px实现间隔 - 用
grid-column-start和grid-row-start可手动对齐某天（如把 1 月 1 日放在第一行第一列），但更推荐按顺序生成 364 个div并用 JS 注入 class - 避免用
minmax()或auto行高——热力图必须像素级可控，否则色块比例失真
色阶 class 命名怎么设计才方便维护？
别用 level-0～level-4 这种抽象命名。直接映射 GitHub 的原始 class：bg-green-0、bg-green-1、bg-green-2、bg-green-3、bg-green-4。原因有三：
- GitHub 官方 DOM 就这么写，调试时一眼能比对
- 颜色值可直接从其 CSS 中提取（
bg-green-0: #ebedf0,bg-green-4: #161b22） - 后续加「无数据」状态时，扩展
bg-gray-0更直观，不用额外查文档
注意：这些 class 必须定义为 display: inline-block 或 aspect-ratio: 1，否则在 flex/grid 里容易被压缩变形。
立即学习“前端免费学习笔记（深入）”；
响应式断点下色块堆叠错位怎么办？
常见错误是只改容器宽度，没重置网格行列数。正确做法是：
- 小屏（
max-width: 768px）下改用grid-template-columns: repeat(4, 1fr)+grid-auto-rows: 8px，把 7 天压缩成 4 列（比如「M/T/W/Th」+「F/Su/…」），并减少行高防溢出 - 超小屏（
max-width: 480px）直接切为单列：grid-template-columns: 1fr，靠grid-auto-flow: row自动换行，此时需用width: 100%+height: 6px统一尺寸 - 绝对不要用
transform: scale()缩放整个网格——会模糊色块边缘，且 hover 区域错位
最易忽略的是：移动端点击目标太小。必须给每个色块加 min-width: 16px 和 min-height: 16px，哪怕视觉上看起来挤，否则手指点不准。
