纯 css grid 可实现日历布局响应，但无法动态计算日期逻辑；必须通过 html 静态补空格或服务端预渲染来对齐首日，且需严格保障无障碍处理。
纯 CSS Grid 实现“自适应日历”在技术上可行，但必须明确：**不写 JS 就无法动态计算当月 1 号是星期几、当月天数、跨月日期等核心逻辑**。所谓“不写 JS 的自适应”，实际是指用 CSS 控制布局响应行为（列数、行高、对齐），而日期结构仍需 HTML 静态生成或服务端预渲染 —— 否则网格根本不知道从哪一列开始放“1号”。
为什么 grid-template-columns: repeat(7, 1fr) 是底线，不能删
日历的语义基础是“以周为单位的 7 列结构”。用 repeat(7, 1fr) 而非 repeat(auto-fit, minmax(40px, 1fr)))，是因为：
- 自动列数（
auto-fit）会打乱星期序列：周一可能在第 2 列，周六跑到第 5 列，用户无法建立空间记忆 -
1fr比百分比更稳——14.2857%在某些分辨率下因子像素累积误差导致最后一列换行 - 移动端应保持 7 列 + 横向滚动（
overflow-x: auto），而非压缩列数；强行改列会破坏可访问性焦点流和屏幕阅读器顺序
首日对齐必须靠 HTML 结构补空格，不是靠 CSS 算偏移
CSS Grid 本身不理解“星期几”，它只按 DOM 顺序填格子。所以若想让 1 号落在周三列（即第 4 列），你得在 HTML 中手动插入 3 个占位元素（比如 <div aria-hidden="true"></div>）放在第一个日期之前。
常见错误是试图仅靠 grid-column-start 让第一个日期“跳格”，但这要求你知道 offset 值 —— 而这个值只能由 JS 的 date.getDay() 算出。没有 JS，你就没法动态设 grid-column-start: 4。
所以纯 CSS 方案的实际做法是：
- 服务端或构建时根据当前月份预计算
firstDayOffset（0–6） - 生成对应数量的空
<div class="empty-day"></div> - 给这些空元素加
aria-hidden="true"和tabindex="-1"，避免键盘焦点停驻 - 后续所有日期按顺序紧跟其后，Grid 自动填满剩余格子
grid-auto-rows: minmax(40px, auto) 在纯 CSS 场景下的真实表现
这个声明能防止内容塌陷，但它依赖于内容自然撑开高度。如果所有日期单元格都只含一个数字（无事件、无 badge），那 auto 部分几乎不起作用，整行就卡在 40px。
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
更现实的问题是 Safari：iOS 16+ 真机中，minmax(40px, auto) 的 auto 常被忽略，表现为行高收缩到文字行高（约 20px），导致日期上下晃动。
纯 CSS 下的应对方式只有两个：
- 降级为
minmax(40px, max-content)（注意 Chrome 90 以下不支持max-content） - 或在每个日期单元格内部加一层
display: flex; flex-direction: column; height: 100%，再设min-height: 40px—— 这样即使没 JS，也能靠 Flex 容器兜底
真正容易被忽略的点：空单元格的无障碍处理
很多人只加 opacity: 0.3 或 visibility: hidden，但这两者都不够。前者仍会被屏幕阅读器朗读（如果里面有文本），后者保留占位、影响焦点顺序。
必须同时做三件事：
- 给空单元格加
aria-hidden="true" - 确保里面没有可聚焦内容（不放
<button></button>、不设tabindex="0"） - 用
pointer-events: none防止误触（尤其在移动端缩放后）
否则，键盘用户 Tab 到空格上会卡住，屏幕阅读器可能读出“空白”或报错“无内容”，这不是“自适应”，是可访问性断裂。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
