css grid可实现纯html+css的响应式个人足迹日历热力图，通过7列网格布局、自定义属性--intensity动态控制颜色深浅，并支持无障碍与小屏适配。
用 CSS Grid 实现个人足迹日历热力图网格，核心是把一年（或指定周期）的日期按周排列成二维网格，再根据每日数据强度动态设置每个格子的颜色深浅。不需要 JS 渲染结构，纯 HTML + CSS 就能搭出响应式骨架，数据驱动颜色用内联 style 或 CSS 自定义属性更灵活。
一、HTML 结构：语义化日历容器
用 section 包裹日历，头部放月份标题和星期栏，主体用 div 按天渲染格子。关键点是保持 7 列固定（周一到周日），行数由当月天数 + 首日偏移决定：
- 先算当月 1 号是星期几（0=周日，1=周一…），补全前置空白格（用空 div 或带 class="empty" 的占位）
- 每天一个 div，添加 data-date 属性（如 "2024-06-15"）方便后续绑定数据
- 为每格统一加 class="day"，便于 CSS 批量控制尺寸、边框、居中等
二、CSS Grid 布局：7 列 + 自适应行
给日历主体（比如 class="calendar-grid"）设 Grid，强制 7 列等宽，行高自适应，用 gap 控制间距：
- display: grid;
- grid-template-columns: repeat(7, 1fr); —— 确保每周 7 天对齐
- gap: 4px; —— 格子间留呼吸感，太密影响热力识别
- aspect-ratio: 1; 或 width: 100%; padding-bottom: 100%; 保证正方形格子（热力图基础）
三、热力颜色映射：用 CSS 变量 + 数据驱动
不推荐写死 class（如 .level-1 ~ .level-5），改用自定义属性传入强度值，CSS 内计算颜色：
- 每个 day 元素加 style="--intensity: 0.35;"（值范围建议 0~1）
- CSS 中用 background-color: hsl(210, 70%, calc(85% - var(--intensity) * 40%)); —— 数值越大越蓝越深
- 支持无数据时 --intensity: 0 → 浅灰背景；满值时 --intensity: 1 → 深蓝，中间线性过渡
- 可叠加 opacity 或 box-shadow 做悬停高亮，增强交互反馈
四、响应式与可访问性补充
小屏下避免横向滚动，改用垂直堆叠或缩放格子：
- @media (max-width: 480px) { .calendar-grid { grid-template-columns: repeat(4, 1fr); } } —— 切成 4 列，两月并排
- 为每个 day 添加 aria-label="2024年6月15日，步行 8240 步"，屏幕阅读器可读
- 用 prefers-reduced-motion 检测用户偏好，关闭 hover 动画
