repeat(auto-fit, minmax(250px, 1fr))) 是核心解法，可自动适配列数并约束每列宽高；需配合 grid-template-rows: 1fr 或 grid-auto-rows: 1fr 控制行高，避免 align-items 失效；跨行需注意行线编号为 n+1，flexbox 更适合每行独立均分场景。
grid-template-columns: repeat(auto-fit, minmax()) 是核心解法
列数不固定但内容高度不等时，repeat(auto-fit, minmax(250px, 1fr))) 是最实用的起点。它让 Grid 容器根据宽度自动决定每行放几列，每列最小 250px、最大可均分剩余空间。注意：auto-fit 会收缩空轨道，auto-fill 则保留空位——对列表类场景，auto-fit 更自然。
- 别写
repeat(auto-fit, 1fr)：缺少最小宽度约束，浏览器无法判断“何时停止插入”，直接报错 - 若卡片内含图片，建议加
aspect-ratio或显式height防止拉伸失真 - 在小屏上，250px 可能撑不开一列，此时应配合媒体查询下调至
minmax(200px, 1fr)或更低
卡片高度不一致？优先用 grid-template-rows: 1fr 而非 align-items
align-items: stretch 看似能拉齐高度，但只要卡片里有 min-height、height、overflow: hidden 或内部 display: flex，它就大概率失效。真正可控的做法是放弃“拉伸子项”，转而控制“行轨道高度”。
- 给容器设
grid-template-rows: 1fr（单行）或grid-template-rows: repeat(3, 1fr)（已知行数） - 若行数动态不确定，改用
grid-auto-rows: 1fr，但必须确保容器有明确高度（如min-height: 300px），否则1fr退化为auto - 搭配
overflow: hidden和text-overflow: ellipsis控制内容溢出，避免撑破行高
grid-row 行线编号错误会导致高度错乱
当你手动用 grid-row: 1 / 6 让某张卡片跨行时，实际只占用了 5 条轨道（从第 1 条线到第 6 条线），而非视觉上“6 行”。如果容器总高按 6 行设计，这一偏差会让后续所有项的行定位偏移，造成高度参差。
- 先确定总行线数：n 行内容 → n + 1 条水平行线（顶部为 1，底部为 n+1）
- 要跨满 6 行内容区，必须写
grid-row: 1 / 7 - 若用
grid-template-rows: repeat(6, 1fr)，则每条轨道对应 1fr，行线编号与轨道数严格对应，不易出错
高度完全不可控时，Flexbox 可能更合适
CSS Grid 没有“每行独立分配空间”的机制。当需求是“每行子项均分该行宽度+高度”，比如 1 个子项占满整行、2 个各占 50%、3 个各占 33.3%，Grid 的 1fr 始终相对于整个容器宽度计算，无法按行重置基准。
- Flexbox 的
flex-wrap: wrap天然支持每行作为独立主轴容器，flex: 1即可实现该行为 - 必须配
min-width（如min-width: 250px），否则flex-basis: 0会让子项从零开始拉伸 - 旧版 Safari 不支持
gap，可用margin模拟，但需处理首尾项额外留白
真正难的不是写对一行 repeat()，而是意识到：Grid 的“自适应列数”和“统一高度”本质是两个不同维度的约束，往往需要组合 minmax()、显式行定义、内容截断策略，甚至在特定场景下主动让位给 Flexbox。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
