用css grid实现日历签到表格对齐的关键是统一网格轨道尺寸、显式定义行列结构、避免内容撑开单元格：设置7等宽列和6等高行，用gap控制间距；通过空单元格或grid-column定位首日；日期项用flex居中并限制尺寸；响应式可切单列或缩放。
用 CSS Grid 实现日历签到表格的行列对齐，关键在于**统一网格轨道尺寸、显式定义行列结构、避免内容撑开单元格**。只要网格容器和子项行为可控，就能做到整齐划一，不依赖 JS 或固定宽高。
1. 设置等宽列 + 等高行
日历通常是 7 列（周一到周日）+ 若干行（最多 6 行）。用 grid-template-columns 和 grid-template-rows 显式声明，确保所有列宽一致、所有行高一致：
.calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr); /* 7 等宽列 */
grid-template-rows: repeat(6, 60px); /* 6 等高行，可按需调整 */
gap: 2px; /* 单元格间距，替代 border-spacing */
}⚠️ 注意：1fr 在等分时比 auto 或 minmax(min-content, 1fr) 更稳定，避免某天文字多导致列宽不均。
2. 用 grid-area 或自动填充控制日期位置
日历首日不一定是周一，需要把第一天“空位”占出来。推荐两种方式：
-
自动布局（推荐）：给每个日期单元格设
grid-column和grid-row，或直接用grid-auto-flow: row配合grid-column-start跳过前置空格； -
手动定位：为前导空格元素（如
.empty-cell）设置grid-column: n，再让第一个日期从对应列开始渲染。
示例（首日是周三，前两天留空）：
<div class="calendar-grid"> <div class="empty-cell"></div> <div class="empty-cell"></div> <div class="date-item" data-day="1">1</div> <div class="date-item" data-day="2">2</div> <!-- ... --> </div>
3. 签到状态单元格保持尺寸一致
签到格子常含图标、数字、背景色等，容易因内容差异造成高度波动。解决方法：
- 所有日期项设
display: flex; align-items: center; justify-content: center;居中； - 限制字体大小、内边距、图标尺寸，避免溢出；
- 对签到态加
min-height: 100%;或height: 100%;，继承行高； - 禁用
white-space: normal导致换行（除非有意支持多行文案）。
4. 响应式微调建议
小屏下 7 列挤在一起？可改用 grid-template-columns: repeat(auto-fit, minmax(40px, 1fr))，但注意这会破坏“7 列日历”的语义结构。更稳妥的做法是：
- 在移动端切换为单列滚动视图（
grid-template-columns: 1fr），每行显示一个日期+签到状态； - 或缩小字体、压缩
gap、用scale(0.9)整体缩放容器（配合transform-origin居中）。
不复杂但容易忽略——Grid 对齐靠的是轨道定义，不是内容适应。定好列数、行数、尺寸、间隙，再把内容“塞进去”，自然就齐了。
