使用 css grid 解决多断点下卡片高度不一致的核心方法是利用 grid-auto-rows 配合 masonry 值，或者在旧版浏览器中通过 minmax(0, 1fr) 结合 auto-fit 实现等高布局。具体做法是为容器设置 display: grid，定义列宽如 repeat(auto-fit, minmax(250px, 1fr))，并设置行高为 minmax(100px, auto)。这样无论内容多少，卡片都会填满当前网格单元的高度，确保视觉整齐。若需支持 masonry，可直接将 grid-auto-rows 设为 masonry，这能自动处理不同高度的卡片，无需额外 js。
CSS Grid 传统布局与 Masonry 布局的对比
传统 Grid 布局通过 minmax 强制单元格等高，而 masonry 模式允许卡片紧密堆叠。传统方法适用于需要严格对齐的场景，而 masonry 更适合内容高度差异大的卡片流。两者均能响应式调整列数，但 masonry 目前仅在部分浏览器中实验性支持。
/* 传统 Grid 等高方案 */
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-auto-rows: minmax(100px, auto);
gap: 16px;
}
/* Masonry Grid 方案（实验性） */
.masonry-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-auto-rows: masonry;
gap: 16px;
}
如何处理卡片内容溢出与对齐问题
当卡片内容超出预期高度时，可通过 overflow: hidden 裁剪内容，或使用 text-overflow: ellipsis 显示省略号。对于对齐问题，可结合 align-items: stretch 确保卡片填满行高，或通过 justify-content 控制水平对齐。这些属性能有效避免内容错位导致的布局混乱。
立即学习“前端免费学习笔记（深入）”；
.card {
overflow: hidden;
text-overflow: ellipsis;
align-items: stretch;
justify-content: center;
}
基于 gap 属性在多断点下的间距调整
gap 属性在 Grid 中用于控制卡片间距，可通过媒体查询在不同断点下动态调整。例如，在小屏幕下设置 gap: 8px，在大屏幕下设置为 gap: 24px。这种细粒度的控制能确保布局在不同设备上保持一致的视觉节奏，同时优化空间利用率。
