本文介绍如何使用 css grid 的 `grid-auto-rows` 与 `display: grid` 特性，强制同一行内所有日期卡片（`.card`）保持统一高度，彻底解决因内容长度不一（如长文本、多行训练计划）导致的视觉参差问题。
在日历类应用中，常见结构是将一周七天横向排列，每天包含多个日期卡片（.card），每张卡片内含日期数字、操作图标及可变长度的内容区域（如 .workout）。当某张卡片的 .workout 区域内容过长（例如多行文本或嵌套元素），其整体高度会显著超出其他卡片——即使设置了 min-height 或 line-height，也无法实现整行卡片等高对齐，因为传统 flex 或块级流布局中，子项高度由自身内容决定，彼此独立。
此时，CSS Grid 是最简洁、语义清晰且无需 JavaScript 干预的解决方案。核心思路是：将 .content 容器设为网格容器，并让每周的七列（对应周一至周日）自动共享同一行高。
✅ 推荐方案：CSS Grid + grid-auto-rows
将原 .content 的 display: inline-flex 替换为 display: grid，并定义 7 列（对应一周七天），同时启用 grid-auto-rows: 1fr —— 这会令每一行中的所有网格项（即每个 .day 下的所有 .card）自动拉伸至该行最大高度：
.content {
display: grid;
grid-template-columns: repeat(7, 1fr); /* 均分 7 列 */
gap: 0.5rem; /* 替代原 border-spacing / margin */
}
/* 每个 .day 作为网格项，内部仍保持原有结构 */
.content .day {
/* 移除 width: 14.3% —— 由 grid 自动分配 */
}⚠️ 注意：.day 元素本身成为网格项（即每周的一列），而其内部多个 .card 属于该列内的子元素。要使同一行中所有 .card 高度一致，需进一步将 .day > div（即包裹 .card 的那个 ）设为 子网格（subgrid）或 flex 容器。但更直接有效的方式是：将每个 .card 提升为独立网格项——即重构 DOM，让所有 .card 直接位于 .content 下，并按日期逻辑分组。不过，若需最小化 HTML 变动，推荐以下兼容性更强的二级网格方案：
✅ 兼容现有结构的增强方案（推荐）
保留当前 HTML 结构，在 .day > div（即 .card 的父容器）上启用 Flex 布局 + align-items: stretch（默认行为），再配合 min-height 与 height: 100% 确保拉伸：
立即学习“前端免费学习笔记（深入）”；
.content .day > div {
display: flex;
flex-direction: column;
gap: 0.5rem; /* 卡片间距 */
}
.content .card {
flex: 1; /* 关键：允许卡片在父容器内等高拉伸 */
min-height: 10rem;
display: flex;
flex-direction: column;
}
/* 确保内部内容不破坏高度一致性 */
.content .workout {
flex: 1; /* 占据剩余空间，避免内容溢出撑高 */
overflow: hidden;
text-overflow: ellipsis;
}同时，为防止 .workout 内容（如
或
）意外撑开高度，建议添加：.content .workout h6 {
margin: 0;
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}? 实际效果对比
| 方案 | 是否需改 HTML | 是否响应式 | 是否支持内容截断 | 维护成本 |
|---|---|---|---|---|
| display: grid on .content（全网格） | ✅ 需扁平化 .card | ✅ 原生支持 | ✅ 易控制 | 中（需调整 React 渲染逻辑） |
| flex + flex: 1 on .card（推荐） | ❌ 零改动 | ✅ 保留媒体查询 | ✅ 可配 overflow | 低 |
✅ 最终推荐 CSS（零 HTML 修改）
/* 替换原 .content 样式 */
.content {
display: flex; /* 保持原有 flex 行为 */
flex-wrap: wrap;
gap: 0.5rem;
}
.content .day {
flex: 1 0 14.2857%; /* 等效于 1/7，响应式更稳 */
min-width: 0; /* 防止 flex 项溢出 */
}
/* 关键：让每日内的卡片容器成为弹性容器 */
.content .day > div {
display: flex;
flex-direction: column;
gap: 0.5rem;
height: 100%;
}
.content .card {
flex: 1;
min-height: 10rem;
display: flex;
flex-direction: column;
border: 1px solid black;
border-radius: 0.2rem;
padding: 0.5rem;
}
.content .workout {
flex: 1;
overflow: auto;
padding: 0.25rem 0;
}
/* 可选：统一日期数字视觉高度 */
.content .day-date span {
display: inline-block;
line-height: 1.8;
font-weight: 600;
}? 总结
- ❌ height / line-height / vertical-align 对块级 .card 无效，因其不改变文档流高度基准；
- ✅ flex: 1 在弹性容器中强制等高拉伸，是当前结构下最稳妥解法；
- ✅ grid-auto-rows: 1fr 是未来标准方案，适合新项目或可重构场景；
- ? 所有方案均应配合 overflow 控制与 line-height 规范化，确保文字层视觉统一。
通过以上任一方式，即可让“TUE 28”与“MON 27”等所有日期卡片在视觉上严格对齐，提升日历组件的专业性与可用性。
