卡片宽度不一致的根源是 grid-template-columns 混用 fr、px、% 等单位，导致列宽计算规则冲突；应统一用 fr（如 repeat(auto-fit, minmax(320px, 1fr))），并约束卡片子元素尺寸与高度，确保视觉节奏一致。
卡片宽度不一致是因为 grid-template-columns 里混用了不同单位
用 fr 单位本身不会导致宽度不一致，真正的问题是：你在 grid-template-columns 中混用了 fr、px、% 或 auto —— 这会让 浏览器 按不同规则计算列宽，最终卡片内容撑开或收缩不一致。
比如写成 grid-template-columns: 1fr 200px 1fr，中间列固定 200px，左右两列才按比例分剩余空间，一旦容器宽度变化，左右列会缩放，但卡片内部文字 / 图片若没约束，就会让卡片视觉宽度“看起来”不齐。
- 确保整行所有列都只用
fr，例如1fr 1fr 1fr或repeat(3, 1fr) - 避免在卡片自身设置
width、min-width或flex相关样式，它们会干扰 grid 的列分配 - 检查卡片子元素（如图片、标题）是否设置了
width: 100%或max-width: 100%，否则可能溢出卡片边界，造成视觉错觉
卡片内容高度不一致也会让“宽度一致”显得失衡
即使列宽完全相等，如果每张卡片内文字行数不同、图片尺寸不同、padding 不统一，视觉上就会觉得“宽窄不一”。这不是 grid 的问题，而是内容渲染的自然结果。
- 给卡片加
display: flex; flex-direction: column，再对内容区域（如文字区）设flex: 1，让高度自动拉平 - 图片统一用
img {width: 100%; height: auto; object-fit: cover;}，并给容器设固定高或min-height - 标题用
line-clamp截断（配合display: -webkit-box）控制行数，避免文字撑高
响应式下 fr 分配失效？注意 minmax() 和 auto-fit
在小屏设备上，如果直接写 repeat(3, 1fr)，可能强行挤出三列导致卡片过窄。此时 fr 仍生效，但人眼已无法接受布局。
立即学习 “ 前端免费学习笔记（深入）”；
- 改用
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))—— 浏览器会尽可能塞进至少 300px 宽的列，不足就自动减少列数 - 不要用
auto-fill替代auto-fit，前者会生成空列占位，后者才真正按需渲染 - 配合
gap而非margin控制卡片间距，避免 margin 折叠或影响 fr 计算
.card-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem; } .card {display: flex; flex-direction: column;} .card img {width: 100%; height: 180px; object-fit: cover; border-radius: 4px;} .card-content {flex: 1; padding: 1rem 0;} 真正难的不是写对 1fr，而是让每张卡片在各种内容输入下保持视觉节奏一致——这需要从 grid 列定义、卡片容器行为、子元素约束三层同时控制。漏掉任何一层，都会让“统一 fr”变成一句空话。
