直接用 repeat(7, 1fr) 正确，但需前置补全当月1号前的空格（根据 getDay() 计算），确保日期对齐星期；格子高度推荐 minmax(40px, auto)，避免 min-content/max-content 兼容性问题；多月切换用 display: none 而非 opacity 或 grid-area 定位；响应式不改列数，只调字体、间隙与容器宽；空格子须处理无障碍（aria-hidden、键盘跳过）。
grid-template-columns: repeat(7, 1fr) 怎么写才不翻车
直接用 repeat(7, 1fr) 是对的，但很多人忘了日历首行必须对齐星期几——如果某月 1 号是周三，前两天空格得占位，否则日期全错位。网格本身不识别“星期”，它只按顺序填格子，所以你得手动补 div 占位。
常见错误现象：grid-auto-flow: row 下日期从左到右、从上到下填，但没算好起始偏移，导致 1 号跑到周四列甚至换行；或者用 :nth-child() 硬调样式，结果跨月后失效。
- 先算出当月 1 号是周几（
date.getDay()，注意周日是 0） - 生成
0到firstDayOfWeek - 1个空div（周日=0 时不用补） - 再依次渲染当月所有日期
1到daysInMonth - 别依赖
grid-column手动定位每个日期——太重，也难维护
grid-auto-rows 和 minmax() 对日历高度的影响
日历格子高度不一致很常见：有的日期文字多（比如带事件标记），有的纯数字。用 grid-auto-rows: 1fr 会导致整行被拉高，破坏视觉节奏；用固定值（如 40px）又容易文字溢出。
推荐用 minmax(40px, auto)，它保证最小高度可读，又允许内容撑开——但要注意，Chrome 和 Safari 对 auto 在 minmax() 中的支持有细微差异，Safari 有时会忽略 auto 部分，表现得像固定高。
立即学习“前端免费学习笔记（深入）”；
- 测试时务必在 Safari 打开真实设备或模拟器，别只信 Chrome DevTools
- 如果内容可能超两行（如带 badge 的日期），加
overflow: hidden+text-overflow: ellipsis防崩 - 避免用
grid-auto-rows: minmax(min-content, max-content)—— 兼容性差，且 Firefox 表现不稳定
用 grid-area 做月视图切换时的定位陷阱
想让「上月/本月/下月」三个面板横向滑动，有人给每个面板设 grid-area: 1 / 1 再靠 transform: translateX() 切换，结果滚动条乱跳、焦点丢失、SSR 渲染错位。
根本问题在于：CSS Grid 的 grid-area 是布局定位，不是展示开关。三块内容同时在 DOM 里、同时参与网格计算，哪怕 opacity: 0，也会触发重排。
- 真正切换时，用
display: none隐藏非当前月（别用visibility或opacity） - 如果要用过渡动画，改用
transform: translateX()+will-change: transform，但确保只有当前月display: grid -
grid-template-areas不适合动态月切换——它写死区域名，换月就得重写 CSS，维护成本高
响应式断点里 grid-column 数量怎么改才不打乱星期逻辑
小屏想改成 4 列（比如周视图），有人直接把 repeat(7, 1fr) 换成 repeat(4, 1fr)，结果周一到周日被切成两行，日历语义全乱。
列数变，不等于“每行显示几天”可以随便变。日历的核心约束是：一行必须对应一周（7 天），否则用户无法横向比对周一到周日。所以响应式该改的是容器宽度和字体大小，而不是列数。
- 真要支持周/日/月多视图，用不同组件，不要硬塞进同一套 grid 模板
- 小屏下保持
repeat(7, 1fr)，通过font-size缩小、gap减小、容器max-width限制来适配 - 如果非得压缩列数（比如只看工作日），显式用
grid-template-columns: repeat(5, 1fr)+ 单独生成周一至周五数据，别复用全周逻辑
最易被忽略的一点：月份天数不固定，2 月可能只有 28 天，但网格仍会生成 42 个格子（6 行 × 7 列）。空格子要不要渲染、要不要加 aria-hidden、键盘导航是否跳过——这些细节不处理，无障碍就挂了。
