日历Grid应使用repeat(auto-fill, minmax(clamp(100px,8vw,140px),1fr)))实现自适应列数与弹性宽度，配合clamp(4px,1.5vw,8px)控制gap，grid-auto-rows设固定值确保行高统一，并用--first-day-offset配合grid-column-start精准对齐首日。
Grid如何用repeat(auto-fill)撑满容器并自动换行
关键不是写死12列，而是让Grid自己算——repeat(auto-fill, minmax(140px, 1fr)))才是日历格子的正确打开方式。它会让每格至少140px宽、最多均分剩余空间，列数随容器宽度动态增减。注意别用auto-fit，它会把空列收缩掉，导致最后一行格子错位。
常见错误是写成repeat(7, 1fr)：一旦屏幕变窄，格子就挤成一条缝甚至溢出；或者用grid-template-columns: repeat(7, 1fr)加grid-auto-flow: column，结果日期顺序全乱——Grid默认按行填充，强行列填充会打乱自然时间流。
- 容器必须设
display: grid且有明确宽度（比如width: 100%或max-width） - 所有日期项用
grid-column: span 1，不手动指定位置 - 如果某月只有28天，最后4个格子会留空——这是预期行为，不要用伪元素硬补
怎么让每周首日（如周一）对齐第一列而不靠JS计算
Grid本身不关心星期几，但可以用grid-column-start配合CSS自定义属性提前“占位”。比如本月1号是周三，就在它前面插入两个空<div>，分别设grid-column-start: 1和grid-column-start: 2，再让1号从第3列开始。这样布局完全静态，不依赖JavaScript生成DOM。
更稳妥的做法是服务端或构建时注入--first-day-offset: 2（表示偏移2列），然后用grid-column-start: calc(var(--first-day-offset) + 1)定位首日。避免用:nth-child()选中空单元格——它不稳定，尤其当上月/下月日期也混在同一列表时。
立即学习“前端免费学习笔记（深入）”；
- 空占位格必须和日期项同级，不能包在额外容器里，否则Grid无法跨区域对齐
- 偏移值范围固定为0–6，超出需取模，否则
grid-column-start会无效 - 不要给空格设内容或背景色，仅用
visibility: hidden或透明边框维持高度
响应式断点下如何保持格子比例不崩塌
单纯改minmax()里的像素值不够——小屏下140px太宽，大屏下又显得稀疏。应该用clamp()替代固定最小值：minmax(clamp(100px, 8vw, 140px), 1fr)。这样格子宽度会在100px到140px间弹性缩放，且始终占视口8%宽度作为基准。
另一个坑是gap写死8px：小屏时缝隙比格子还显眼。建议用gap: clamp(4px, 1.5vw, 8px)，同时约束行列间隙一致。如果需要标题栏（周几名称）和日期区分离，用grid-template-rows划分，但别用grid-row-start硬推日期区到第二行——那样会破坏无限扩展性。
- 避免在媒体查询里重写整个
grid-template-columns，只调minmax()参数 - 测试时拖动浏览器窗口，观察格子是否平滑缩放而非跳变
- 移动端慎用
scroll-snap，Grid容器内滚动容易和触摸事件冲突
为什么不用grid-auto-rows而要设固定行高
grid-auto-rows: minmax(120px, auto)看似合理，但会导致不同行高度不一致——比如含长文本的日期格子把整行撑高，影响下方月份对齐。日历是表格式布局，行高必须统一。直接设grid-auto-rows: 120px最稳，再用align-items: start让内容贴顶，多余空间留白。
若需支持多行事件文本，格子内部用Flex或display: contents嵌套，而不是让Grid自动分配行高。否则下个月份的第一行可能被上月某格的“自动高度”带歪。
- 行高值必须是固定数字，不能是
em或rem，否则字体缩放时Grid轨道会重新计算 - 如果格子内用
position: absolute盖层，记得父容器加position: relative，Grid本身不创建新层叠上下文 - 打印样式表里要重置
grid-auto-rows为auto，否则打印预览全是空白页
真正难的不是写出能铺开的Grid，而是让任意月份、任意起始星期、任意屏幕尺寸下，每个格子都严格对齐、不重叠、不溢出、不跳动。这些细节藏在minmax()的边界值、grid-column-start的偏移计算、以及gap的弹性表达式里——少一个clamp()，小屏就糊成一片。
