Grid日历自动对齐靠grid-template-columns: repeat(7, 1fr)和grid-column-start定位首日；用data-month属性配合CSS变量区分月份样式；事件委托需用closest('[data-date]')安全获取目标。
Grid布局怎么让日历格子自动对齐星期几
关键不是靠手动算偏移，而是用 grid-template-columns 固定7列，再用 grid-auto-flow: row 让日期按顺序填进去。起始位置由第一天是星期几决定——比如这个月1号是周三，就得在前两格留空，但别用空 <div></div> 填充，容易破坏语义和可访问性。
- 正确做法：给第一个日期元素加
grid-column-start，值为weekdayIndex + 1（周一=1，周日=7） - 错误现象：
display: grid后格子挤成一列或错位，大概率是忘了设grid-template-columns: repeat(7, 1fr) - 兼容性注意：IE不支持
grid-auto-flow: row dense，但日历不需要 dense，不用管
如何用CSS变量动态控制当月/上月/下月日期样式
日历里不同月份的日期颜色、透明度要区分，靠JS打class太重，直接用属性选择器 + CSS变量更轻量。核心是让每个日期单元格带一个 data-month 属性（如 "current" / "prev" / "next"），然后用属性选择器匹配。
-
[data-month="prev"] { opacity: 0.5; }比.calendar__date--prev更易维护 - 别用
nth-child区分月份——它只看DOM顺序，不反映实际月份逻辑 - 性能影响小，但大量日期节点（比如跨年视图）建议用
content-visibility: auto隐藏不可见区域
点击日期触发事件时，为什么 event.target 不是日期单元格
常见于用 <button> 或 <div role="button"> 包裹日期内容，结果点文字或内边距时 event.target 是 span 或伪元素。Grid本身不影响事件捕获，问题出在结构嵌套和事件委托设计。
- 确保日期容器是直接可交互元素：
<button type="button" data-date="2024-06-15">15</button> - 监听父容器时，用
event.target.closest('[data-date]')安全取值，别直接用event.target.dataset.date - 如果用了
grid-area或绝对定位覆盖，检查是否pointer-events: none误加在了某层父元素上
响应式断点下Grid日历塌陷成单列怎么办
小屏不是简单改成 repeat(1, 1fr) 就完事——那样会丢失“周”的视觉节奏，用户难扫读。真正有用的方案是保留7列但压缩字体+内边距，并在极窄屏（grid-auto-flow: column 让日期从上到下排，而不是从左到右。
立即学习“前端免费学习笔记（深入）”；
- 推荐断点：
@media (max-width: 480px) { grid-template-columns: 1fr; grid-auto-flow: column; } - 别用
flex-wrap替代 Grid——Flex在多行对齐星期标题时容易错位 - 手机端点击热区至少 44×44px，
padding不够就用min-height补，别靠zoom或transform: scale()
最常被忽略的是键盘导航支持：Grid本身不提供焦点流，tabindex 和 focus-visible 样式得自己补全，否则盲人用户根本没法用方向键切日期。
