CSS Grid实现日历应使用grid-template-columns: repeat(7, 1fr)定义七列，配合grid-column-start跳格填充首日空缺，grid-auto-rows: minmax(40px, auto)保障行高，移动端宜横向滚动而非折行列。
用 grid-template-columns 控制每周七列，别靠 float 或 inline-block 硬凑
日历本质是固定 7 列 × N 行的网格结构，强行用浮动或行内块对齐日期，会因月份天数变化（28–31 天）、首日偏移（比如某月 1 号是周三）导致最后一行错位或换行异常。CSS Grid 天然适配这种二维规律布局。
正确做法是显式声明列数，并用 grid-template-columns 定义等宽列：
calendar {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
}
注意：1fr 比 14.2857% 更可靠——百分比在某些浏览器中会因子像素渲染产生累积误差，导致最后一列换行；fr 单位由 Grid 自动均分剩余空间，无此问题。
用 grid-column-start 填充首日空缺，而不是塞空 <div>
<p>每月 1 号不一定从周日开始，传统做法常插入若干空 <code><div> 占位，既增加 DOM 节点，又让语义混乱（空单元格不该有可聚焦/可读内容）。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<p>更干净的方式是让第一个日期元素自己“跳格”：</p>
<ul>
<li>算出该月 1 号是星期几（<code>date.getDay()，0=Sunday），得到偏移量 offset
grid-column-start: calc(<code>offset + 1)（注意：Grid 列号从 1 开始）例如：1 号是周三（getDay() === 3），则首日元素加 grid-column-start: 4，它会自动落在第 4 列，前三列留空——Grid 自动处理空白，不破坏流式结构。
用 grid-auto-rows: minmax(40px, auto) 防止跨月高度塌陷
不同日期可能有不同内容密度（如带事件标签的日期更高），若只设固定行高，要么挤压内容、要么浪费空间；若不设，Grid 默认行高为 0，导致内容重叠。
minmax(40px, auto) 是关键：
- 保证每行至少 40px 高，避免文字被截断
- 内容超出时自动撑开，不影响其他行
- 比
auto更可控，比40px更灵活
同时建议搭配 align-items: center 居中文字，避免因行高变化导致日期数字上下跳动。
响应式断点下慎用 grid-template-columns: repeat(auto-fit, minmax(...)))
在小屏上把 7 列压成 4 列甚至 2 列，看似节省空间，但会破坏日历基本语义——周序列被打乱，用户无法快速定位“本周六在哪”。移动端更合理的做法是保持 7 列，改用横向滚动：
@media (max-width: 480px) {
calendar {
overflow-x: auto;
scroll-snap-type: x mandatory;
}
.day {
scroll-snap-align: start;
}
}
这样既维持了周结构完整性，又避免内容被压缩变形。真要缩减列数，必须同步重排日期逻辑（比如改为“周视图”而非“月视图”），不能仅靠 Grid 自动折行——那会导致周一到周日散落在不同行，失去日历意义。
Grid 实现日历最易被忽略的点：它不解决“哪天是今天”“怎么高亮范围选择”“如何绑定点击事件到具体日期”，这些仍需 JS 配合数据驱动。Grid 只管排版——但排得稳，JS 才好干活。
