应使用 css grid 的 repeat(7, 1fr) 定义 7 列，js 动态计算行数并为每个格子显式设置 grid-row 和 grid-column 定位，配合 background-color 与 opacity 控制颜色层级，响应式通过调整 grid-auto-columns 和 gap 实现，保持列数恒为 7。
用 grid-template-columns 控制列数和宽度，别硬写 52 个 div
GitHub 贡献图是 7 列 × 52 行（对应一年的周数），但直接手写 364 个格子既难维护又不可扩展。正确做法是用 CSS Grid 的列定义配合 JS 动态生成 —— 先定好列：7 列等宽，用 repeat(7, 1fr)；行数交给 JS 根据实际数据年份范围计算（比如从 2023-01-01 到今天共多少周）。注意：列必须设为 7，否则星期顺序错乱（周一在左还是周日在左取决于你数据排序，但列数不能变）。
每个格子用 grid-column 和 grid-row 定位，而不是靠 DOM 顺序硬排
很多人误以为只要按「周→日」顺序塞 div 就能对齐，结果发现第一行全是周一、第二行全是周二……这是因为 Grid 默认按源顺序逐行填满，不识别语义。正确方式是给每个格子显式设置位置：
– 周数决定 grid-row（第 1 周 → row: 1）
– 星期几决定 grid-column（周日=1，周一=2…周六=7，或按你数据里的 dayOfWeek 值映射）
– 所有格子都加 position: relative，方便后续加 tooltip 或 hover 效果
颜色层级靠 background-color + opacity 实现，别用多层叠加
GitHub 用 4 级透明度区分活跃度（#ebedf0 到 #218838），关键点在于：
– 所有格子默认设最浅色（空单元格也要占位）
– 仅对有提交的日期用内联 style="background-color: #40c463; opacity: 0.8;" 覆盖
– 避免用多个 class 控制颜色（如 .level-0～.level-3），因为 opacity 在不同背景上表现不稳定，统一用单色 + 可调 opacity 更可控
– 不要用 rgba() 替代 opacity，否则嵌套容器时颜色会意外叠加
响应式断点要改 grid-auto-columns，不是缩放整个容器
小屏下网格挤成一团，常见错误是给外层加 transform: scale(0.8) —— 这会让点击区域错位、字体模糊。正解是媒体查询里调整格子尺寸和间距：
– 桌面端：每个格子 width: 12px; height: 12px; gap: 3px
– 平板：改为 width: 10px; height: 10px; gap: 2px
– 手机：用 grid-auto-columns: 8px + gap: 1px，同时把字体大小设为 0（隐藏月份标签，只留网格）
– 切记：不要改 grid-template-columns 的列数，7 列必须保持，否则星期逻辑崩坏
最易被忽略的是时间计算部分——JS 生成格子前，必须把原始提交日期归一化到「周起始日 + 星期索引」，否则 grid-row/grid-column 会偏移一行或一列。这个归一化步骤没有标准库函数，得自己用 getDay() 和 setDate() 算清楚。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
