必须用1fr而非百分比或固定值，因1fr由grid引擎动态均分剩余空间，无累积像素误差、适配所有视口且响应字体缩放；百分比存在子像素渲染导致换行，固定值无法响应式伸缩。
grid-template-columns: repeat(7, 1fr) 为什么必须用 1fr 而不是百分比或固定值
直接写 grid-template-columns: repeat(7, 14.2857%) 在某些分辨率下会因子像素渲染误差导致最后一列换行；写死 120px 则窄屏溢出、宽屏留白，且无法响应字体缩放。而 1fr 由 Grid 引擎动态均分容器剩余空间，无累积误差，适配所有视口。
别用 minmax(120px, 1fr) 这类混合写法——旧版 Safari 会退化为固定宽度，列直接错位。
首日对齐该用 grid-column-start 还是塞空 div
塞空 <div class="empty"></div> 是常见错误：DOM 节点冗余、aria-hidden="true" 得手动加、Tab 键会停在空格上干扰导航。
- 算出当月 1 号星期几：
date.getDay()返回 0（周日）到 6（周六） - 若按周一为周首，偏移量 =
date.getDay() === 0 ? 6 : date.getDay() - 1 - 给第一个日期元素加
grid-column-start: calc(<code>offset + 1)（列号从 1 开始） - 后续日期按 DOM 顺序自然填充，Grid 自动跳过空白列
grid-auto-rows: minmax(40px, auto) 在 Safari 中塌陷怎么办
Safari 对 minmax(min, auto) 的 auto 支持不稳定，尤其 iOS 16+ 真机上常表现为行高塌陷成文字高度——这不是 bug，是 Safari 实现中 auto 未参与弹性计算。
临时解法：minmax(40px, max-content) 或改用内部 display: flex + min-height: 40px 容错；但更稳妥的是统一用 minmax(40px, 1fr)，再配合 overflow: hidden 防文字撑破。
小屏下 grid-auto-flow: column 不只是改一个属性
仅在 @media (max-width: 480px) 里设 grid-auto-flow: column 不够，容易导致内容横向溢出或星期标题错位。
- 必须同步把
grid-template-columns改为1fr，否则仍保留 7 列 - 星期标题需单独包裹（如用
<header></header>或独立 Grid 容器），避免被流打乱顺序 - 确保每个日期元素有
tabindex="0"和:focus-visible样式，键盘焦点流才完整 - 触摸热区必须 ≥ 44×44px，靠
padding补，别依赖min-height
真正卡住“自适应”的从来不是列数，而是首日偏移计算是否健壮、Safari 下行高是否塌陷、小屏时语义与焦点流是否断裂——这些点漏掉一个，Grid 日历就只是看着对，用着断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
