答案是使用align-items: stretch。在CSS Grid布局中，通过设置align-items: stretch（默认行为），可使网格项目在交叉轴上拉伸以填满整个行高；结合min-height确保容器有足够高度，并避免子项设置align-self或固定height覆盖拉伸行为，从而实现等高行效果。
在CSS Grid布局中，让网格行中的项目自动撑满整行高度，关键在于理解 align-items 和 align-self 的作用。默认情况下，Grid容器内的项目会拉伸（stretch）以填满整个网格轨道高度，这正是实现“等高行”的基础。
1. 使用 align-items: stretch（默认行为）
Grid容器上的 align-items 属性控制项目在交叉轴（通常是垂直方向）上的对齐方式。stretch 是其默认值，表示子元素将拉伸以填满整个网格单元格的高度。
只要不显式设置其他值（如 start、center、end），项目会自然等高。示例：
.container {
display: grid;
grid-template-columns: 1fr 2fr;
align-items: stretch; /* 可省略，因为是默认值 */
}
.item {
background: #e0f7fa;
padding: 1rem;
}
此时两个列中的项目会等高，高度由内容较多的那一栏决定。
立即学习“前端免费学习笔记（深入）”；
2. 确保父容器有明确的高度约束
如果Grid容器本身没有足够的高度（比如内容太短，又未设最小高度），stretch 可能不会表现出明显效果。要让等高更可靠，可为容器设置 min-height 或将其嵌入一个有明确高度的上下文中。
例如：
.container {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 100px; /* 确保有最小高度 */
align-items: stretch;
}
3. 避免覆盖默认拉伸行为
某些情况下，给子元素设置 align-self: start | center | end 会阻止其拉伸。若希望某个项目不拉伸，可以单独设置，但整体等高需保持大多数项目使用 stretch。
正确做法：保持默认，除非有特殊需求：
- 不要给子项设置 align-self，除非想打破等高
- 避免在子项上设置固定高度，否则可能限制拉伸
- 使用 min-height 替代 height 更灵活
4. 实际应用场景：卡片布局
常见于并排展示信息卡片，即使内容长短不一，也保持视觉整齐。
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
align-items: stretch;
}
.card {
background: white;
border: 1px solid #ddd;
padding: 1rem;
}
每张卡片在同一行中会自动等高，提升整体美观度。
基本上就这些。Grid的 align-items: stretch 天然支持等高行，无需额外JavaScript或复杂Hack，只要结构合理、样式未被覆盖，就能轻松实现。
