repeat(3, 1fr) 仅控制列宽，不约束行高、内容溢出、容器显示模式及响应行为，需配合 display: grid、gap、min-width: 0 和响应式 auto-fit + minmax() 才能可靠实现三列等分。
直接用 grid-template-columns: repeat(3, 1fr) 就能实现三列等分，但实际布局常出问题——不是卡片高度不齐，就是响应式崩了，或者内容溢出破坏网格。
为什么 repeat(3, 1fr) 看似简单却容易失效
这个写法本身没错，但它只控制列宽，不约束行高、内容撑开、容器最小宽度或响应行为。常见现象包括：
- 卡片内文字过长导致宽度突破
1fr，尤其没设min-width: 0 - 图片或子元素未限制尺寸，把整列拉宽（
fr单位会重分配） - 父容器没设
display: grid或遗漏gap，视觉上“不等分” - 在小屏下仍强行三列，卡片被压缩到无法阅读
必须配齐的配套声明
单靠 grid-template-columns 不够，这四条要一起写：
container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
width: 100%;
}
特别注意：
立即学习“前端免费学习笔记（深入）”；
-
display: grid缺失是 80% 的“没生效”原因 -
gap推荐用rem或px，别用%（会和fr冲突） - 给卡片加
min-width: 0，防止内部长文本/链接撑破列宽
响应式三列 → 两列 → 单列的稳妥写法
别硬切断点，用 minmax() + auto-fit 更鲁棒：
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1rem;
}
解释：
-
minmax(300px, 1fr)：每列至少 300px，剩余空间均分 -
auto-fit：空列自动收缩，比auto-fill更适合卡片流 - 300px 是临界值，可按设计稿调，比如移动端用
250px
卡片内容溢出时的隐藏与截断控制
等分后卡片高度不一致很常见，若需视觉统一，优先用 CSS 控制，而非 JS 计算高度：
- 标题截断：
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - 多行文本截断（仅 Webkit）：
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; - 图片强制等比缩放：
img { width: 100%; height: auto; object-fit: cover; } - 绝对定位元素（如 badge）需设
position: relative在卡片上，否则脱离网格流
真正麻烦的不是列数，是卡片内各元素对 fr 分配的隐式干扰——每次布局异常，先查子元素有没有没设 max-width 或 flex-shrink: 0 的顽固节点。
