本文介绍如何使用 css grid 的 `grid-auto-rows` 与 `display: grid` 布局，让多列日历中每行的日期卡片（`.card`）自动保持统一高度，彻底解决因内容长度不一（如长文本、多行训练计划）导致的视觉参差问题。
在构建日历或周视图组件时，一个常见痛点是：同一行中的日期卡片（如周一至周日各列下的 .card 元素）因内部内容差异（例如某天包含多行训练详情
ddd
ddd
...
，而其他天为空或仅含单数字），导致高度不一致，破坏网格对齐感与视觉节奏。ddd
...
你可能已尝试为 .card 设置 height、min-height 或 line-height，但效果不佳——这是因为这些属性仅作用于单个元素，无法强制整行所有列按该行最高卡片同步拉伸。真正的解法在于改变容器的布局模型，从 inline-flex（当前 .content 使用）升级为 CSS Grid，利用其原生的“等高行”能力。
✅ 推荐方案：使用 display: grid + grid-auto-rows
将外层容器 .content 改为 Grid 布局，并明确声明列数与自动行高策略：
.content {
display: grid;
grid-template-columns: repeat(7, 1fr); /* 7列：周一至周日 */
grid-auto-rows: minmax(10rem, auto); /* 关键！每行最小高度10rem，可弹性撑高 */
gap: 0.5rem; /* 替代原 border-spacing 或 margin，更可控 */
}
/* 移除原有 flex 相关样式（如 width: 14.3%） */
.content .day {
/* 删除 width: 14.3%; */
margin: 0; /* Grid 会自动分配空间 */
}
/* 确保每个 .card 占满整格高度 */
.content .card {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0; /* 防止 flex 子项溢出时 collapse */
}? 为什么 grid-auto-rows: minmax(10rem, auto) 更优？1fr 在 grid-auto-rows 中虽能均分，但若内容超长仍会撑开；而 minmax(10rem, auto) 既保证基础高度（避免过矮），又允许内容自然扩展（如长训练计划），同时强制同网格行内所有 .card 高度严格一致——这是 Flexbox 无法原生实现的。
?️ 同时优化内部结构（增强健壮性）
为确保 .card 内部元素（日期、菜单、训练内容）在等高前提下合理分布，建议微调子元素：
立即学习“前端免费学习笔记（深入）”；
.card {
display: flex;
flex-direction: column;
height: 100%;
}
.day-date {
flex: 0 0 auto; /* 固定高度区域，不伸缩 */
margin-bottom: 0.25rem;
}
.creation-menu,
.workout {
flex: 1 1 auto; /* 剩余空间由它们弹性分配 */
overflow: hidden; /* 防止内容溢出破坏布局 */
}
.workout h6 {
margin: 0;
font-size: 0.875rem;
line-height: 1.4;
}⚠️ 注意事项与兼容性
- 浏览器支持：CSS Grid 已被所有现代浏览器（Chrome 57+、Firefox 52+、Safari 10.1+、Edge 16+）全面支持，无需前缀。
-
响应式适配：移动端需切换为单列布局，可在媒体查询中覆盖 Grid：
@media (max-width: 768px) { .content { grid-template-columns: 1fr; grid-auto-rows: auto; /* 移动端无需强制等高，按内容自然排列 */ } } - 避免 height: 100% 陷阱：确保 .content 的父容器有明确高度（或 min-height），否则 100% 可能失效；实践中推荐用 minmax() 而非绝对 height。
- React 渲染提示：若使用 React 动态渲染，Grid 布局完全与 JS 逻辑解耦，无需额外处理——只需确保 HTML 结构符合 Grid 容器 → 7列子项 → 卡片的层级关系即可。
✅ 总结
要实现日历中每行日期卡片的视觉统一，核心不是“约束单个卡片”，而是“定义整行行为”。CSS Grid 的 grid-auto-rows 是目前最简洁、可靠且语义清晰的解决方案。它摒弃了 JavaScript 计算高度、Flexbox hack 或固定 height 的妥协方式，以声明式语法达成真正的响应式等高网格。立即替换 .content 的 display 值，并配合 minmax() 和 flex 子项控制，你的日历将瞬间获得专业级排版一致性。
