本文介绍如何通过 css grid 的 `grid-auto-rows` 与 `display: grid` 布局，强制同一行中所有日期卡片（`.card`）保持统一高度，彻底解决因内容长度不一（如长文本、多行训练计划）导致的视觉参差问题。
在构建日历或周视图组件时，一个常见痛点是：同一行中的日期卡片（.card）因内部内容差异（例如某天包含多行训练描述
ddd
ddd
...
，而其他天为空或仅含单数字）导致高度不一致，破坏网格整齐性。您尝试过 height、line-height 或 vertical-align 等传统方案，但效果不佳——这是因为这些属性无法跨兄弟元素协调高度，尤其当子内容流式撑开容器时，纯块级布局（如 inline-flex）天然缺乏“行级等高”能力。ddd
...
根本解法：改用 CSS Grid 布局
CSS Grid 提供了原生的、声明式的行高同步机制。关键在于将 .content 容器设为 display: grid，并利用 grid-auto-rows 强制所有自动创建的行具有相等高度（基于该行中最高单元格自动计算）。配合 grid-template-columns 明确定义 7 列（对应周一至周日），即可实现真正的“行内等高”。
以下是针对您原始 HTML 结构的最小化、可直接落地的 CSS 修改方案：
/* 替换原有 .content 的 inline-flex 布局 */
.content {
display: grid;
grid-template-columns: repeat(7, 1fr); /* 均分 7 列 */
grid-auto-rows: minmax(10rem, auto); /* 最小高度 10rem，允许弹性增长 */
gap: 0.5rem; /* 替代原 border-spacing，更简洁 */
}
/* 移除 .content .day 的 width 百分比（Grid 已接管列分配） */
.content .day {
/* 删除 width: 14.3%; */
}
/* 可选：增强卡片内部一致性 */
.content .card {
display: flex;
flex-direction: column;
min-height: 0; /* 关键！允许 flex 容器在 Grid 中正确收缩 */
border: 1px solid black;
border-radius: .2rem;
padding: .5rem;
}
/* 确保 .workout 等动态内容区域不破坏等高 */
.content .workout {
flex: 1; /* 占据剩余空间，避免内容外溢撑高 */
overflow-y: auto; /* 内容超长时启用滚动，保持卡片高度稳定 */
}✅ 为什么这比 flex + align-items 更可靠？inline-flex 下 .day 是独立容器，每个 .day 内部的 .card 高度只受自身内容影响；而 grid 将整个 .content 视为一个二维平面，grid-auto-rows 会全局计算每行所有 .card 的最大高度，并统一应用，无需 JavaScript 计算或 hack 式固定高度。
注意事项与最佳实践：
-
响应式兼容：在移动端（@media (max-width: 768px)）中，您当前的 flex-direction: column 逻辑仍有效，只需将 grid 布局覆盖为 display: block 或保留 grid 并改为 grid-template-columns: 1fr 即可：
@media (max-width: 768px) { .content { grid-template-columns: 1fr; grid-auto-rows: auto; /* 移动端按需高度，更自然 */ } } - 避免 min-height 冲突：原 CSS 中 .card 的 min-height: 10rem 在 Grid 下可能被忽略，建议移除，改用 grid-auto-rows: minmax(10rem, auto) 统一控制。
- 字体与行高：确保 .day-title 和 .card 内文字使用一致的 font-family、line-height 和 box-sizing: border-box，防止渲染差异引入微小高度偏差。
- 性能提示：Grid 等高是纯 CSS 渲染行为，零 JS 开销，比动态计算 DOM 高度的方案更高效、更稳定。
综上，CSS Grid 不仅是现代布局的基石，更是解决“行内等高”这类经典 UI 问题的最优雅答案。只需三行核心 CSS（display: grid、grid-template-columns、grid-auto-rows），即可让您的日历视图瞬间变得专业、整齐、可维护。
立即学习“前端免费学习笔记（深入）”；
