真正卡住开发的是首日偏移、跨月样式、等高对齐和空单元格处理；需用 date.getDay() 计算偏移并设置 grid-column-start，minmax(40px, auto) 控制行高，data-month 属性区分月份，aria-hidden="true" 处理空格。
直接用 grid-template-columns: repeat(7, 1fr) 是可行的，但“可定制”不在于列数本身，而在于如何让列行为响应内容、月份逻辑和交互意图——硬写死 7 列只是起点，真正卡住开发的往往是首日偏移、跨月样式、等高对齐和空单元格处理。
怎么让1号自动对齐到对应星期列（不用插空）Grid 不识别“星期”，只按顺序填格子。如果某月 1 号是周三（date.getDay() === 3），它必须落在第 4 列（列号从 1 开始），否则整个月错位。
- 计算偏移量：
firstDayOffset = date.getDay() === 0 ? 6 : date.getDay() - 1（按周一为每周起始，周日=0 → 偏移6）
- 给第一个日期元素加
grid-column-start: calc(<code>firstDayOffset + 1)
- 后续日期无需设置位置，Grid 自动按
grid-auto-flow: row 顺序填充
- 避免用空
<div> 占位：语义混乱、增加 DOM 节点、键盘焦点干扰、无障碍阅读器误读
为什么 grid-auto-rows: minmax(40px, auto) 比 1fr 更适合日历行高
1fr 在 grid-auto-rows 中会让每行均分容器高度，但日历不是全屏表格——它需要“最小可读高度 + 内容撑开”的弹性，而非强制拉伸。
-
minmax(40px, auto) 保证每个格子至少 40px 高，文字不挤；内容多时（如带事件标签的日期）可自然扩展
-
1fr 容易导致空行被拉得过高，或内容超长时整行失衡（尤其在多周视图中）
- Safari 对
minmax(min, auto) 的 auto 支持略弱，若遇塌陷，可降级为 minmax(40px, max-content)，但注意 max-content 在旧版 Chrome 兼容性差
- 别设固定
height：会截断内容、破坏可访问性缩放、移动端字体变大后溢出
如何区分上月/本月/下月日期而不靠 JS 打 class
用 HTML 属性驱动样式，比动态加 class 更轻量、更利于 SSR 和缓存。
立即学习“前端免费学习笔记（深入）”；
- 渲染每个日期时带上
data-month="prev" / "current" / "next"
- CSS 直接匹配：
[data-month="prev"] { opacity: 0.45; color: #999; }，[data-month="next"] { pointer-events: none; }
- 绝对不要用
:nth-child(8) 这类伪类来区分月份——它只数 DOM 顺序，无法反映真实日期逻辑，跨月就失效
- 若需支持深色模式，可用
color-scheme: light dark 配合 @media (prefers-color-scheme: dark) 微调，而非重写整套 class
空单元格怎么处理才不影响键盘导航和屏幕阅读器
空格子不是“无意义”，而是“非当前月有效日期”，必须显式声明其状态。
- 保留空
<div> 元素（不删），但加 aria-hidden="true" 和 tabindex="-1"
- 配合 CSS：
.empty { opacity: 0.3; pointer-events: none; }
- 别用
display: none 或 visibility: hidden：会彻底移除可访问性树节点，屏幕阅读器跳过，键盘 Tab 也跳过，破坏日历的线性浏览流
- 若用
grid-column-start 跳格实现空缺，空列本身由 Grid 自动留白，无需 DOM 元素——这是最干净的做法，但要求你严格控制首个日期的位置
真正难的不是写出 7 列网格，而是让每一列在内容变化、月份切换、缩放、焦点移动时都保持语义正确和视觉稳定——这些细节不会报错，但用户一用就卡顿、错位或读不到。
Grid 不识别“星期”，只按顺序填格子。如果某月 1 号是周三（date.getDay() === 3），它必须落在第 4 列（列号从 1 开始），否则整个月错位。
- 计算偏移量：
firstDayOffset = date.getDay() === 0 ? 6 : date.getDay() - 1（按周一为每周起始，周日=0 → 偏移6） - 给第一个日期元素加
grid-column-start: calc(<code>firstDayOffset + 1) - 后续日期无需设置位置，Grid 自动按
grid-auto-flow: row顺序填充 - 避免用空
<div>占位：语义混乱、增加 DOM 节点、键盘焦点干扰、无障碍阅读器误读
为什么 grid-auto-rows: minmax(40px, auto) 比 1fr 更适合日历行高
1fr 在 grid-auto-rows 中会让每行均分容器高度，但日历不是全屏表格——它需要“最小可读高度 + 内容撑开”的弹性，而非强制拉伸。
-
minmax(40px, auto)保证每个格子至少 40px 高，文字不挤；内容多时（如带事件标签的日期）可自然扩展 -
1fr容易导致空行被拉得过高，或内容超长时整行失衡（尤其在多周视图中） - Safari 对
minmax(min, auto)的auto支持略弱，若遇塌陷，可降级为minmax(40px, max-content)，但注意max-content在旧版 Chrome 兼容性差 - 别设固定
height：会截断内容、破坏可访问性缩放、移动端字体变大后溢出
如何区分上月/本月/下月日期而不靠 JS 打 class
用 HTML 属性驱动样式，比动态加 class 更轻量、更利于 SSR 和缓存。
立即学习“前端免费学习笔记（深入）”；
- 渲染每个日期时带上
data-month="prev"/"current"/"next" - CSS 直接匹配：
[data-month="prev"] { opacity: 0.45; color: #999; }，[data-month="next"] { pointer-events: none; } - 绝对不要用
:nth-child(8)这类伪类来区分月份——它只数 DOM 顺序，无法反映真实日期逻辑，跨月就失效 - 若需支持深色模式，可用
color-scheme: light dark配合@media (prefers-color-scheme: dark)微调，而非重写整套 class
空单元格怎么处理才不影响键盘导航和屏幕阅读器
空格子不是“无意义”，而是“非当前月有效日期”，必须显式声明其状态。
- 保留空
<div>元素（不删），但加aria-hidden="true"和tabindex="-1" - 配合 CSS：
.empty { opacity: 0.3; pointer-events: none; } - 别用
display: none或visibility: hidden：会彻底移除可访问性树节点，屏幕阅读器跳过，键盘 Tab 也跳过，破坏日历的线性浏览流 - 若用
grid-column-start跳格实现空缺，空列本身由 Grid 自动留白，无需 DOM 元素——这是最干净的做法，但要求你严格控制首个日期的位置
真正难的不是写出 7 列网格，而是让每一列在内容变化、月份切换、缩放、焦点移动时都保持语义正确和视觉稳定——这些细节不会报错，但用户一用就卡顿、错位或读不到。
