grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))) 不能实现每行均分，因所有列共享同一1fr基准（容器宽÷列数），单列不随行内子项数量动态重分配；align-content: start 和 grid-auto-rows: minmax(min-content, auto) 可消除顶部空隙并适配各行内容高度；子项内部对齐需用 flex 布局而非依赖 grid-auto-rows；row-gap: 0 比 gap: 0 更可靠地清除垂直间隙；grid 中轨道与项是两层独立系统，须分别控制。
为什么 grid-template-columns: repeat(auto-fit, minmax())) 不能解决“每行均分”问题
你写 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) 后发现：一行 3 个子项时各占约 33.3%，但换行后只剩 1 个，它却没占满整行——这不是 bug，是 Grid 的设计逻辑。该声明只控制**列轨道数量与单列宽度范围**，所有列共享同一套 1fr 计算基准（即整个容器宽度），不会为每一行重新归一化。所以单个子项仍按“容器宽 ÷ 当前列数”分配空间，视觉上就显得窄而孤立。
用 align-content: start + grid-auto-rows 防止顶部留白
当子项数量少于单行最大容量时，Grid 默认将轨道居中堆叠，导致顶部大片空白。这不是 gap 或 margin 造成的，而是 align-content 在起作用。
-
align-content: start强制所有行轨道贴顶排列，消除默认居中带来的空隙 -
grid-auto-rows: minmax(min-content, auto)比1fr更安全：它让每行高度随内容自然伸缩，避免短内容被强行拉高 - 若某行只有 1 个高卡片，其他行全是文字卡片，
grid-auto-rows: 1fr会让所有行等高，破坏视觉节奏；minmax(min-content, auto)则保留真实内容高度差异
子项内部对齐别依赖 grid-auto-rows
设了 grid-auto-rows: 1fr 却发现卡片底部按钮错位？这是常见误解。grid-auto-rows 只影响**隐式生成的行轨道高度**，对同一行内多个子项的高度差异完全无效。同一行中，一张长文本卡片会把整行撑高，另一张纯图卡片只能被动跟随。
- 正确做法是在每个子项内部用
display: flex; flex-direction: column; justify-content: space-between控制自身内容对齐 - 若需统一最小高度兜底，改用
grid-auto-rows: minmax(200px, auto)，既保底线又不锁死上限 - 绝对不要给子项设
height: 100%—— 它依赖父行高度，而父行高度又由内容决定，容易形成循环或截断
gap 和 row-gap 必须显式关闭才能实现“无间隙堆叠”
想让 item2 和 item3 紧密上下堆叠、不留空隙？仅靠 gap: 0 不够。因为 gap 是简写，它同时重置 row-gap 和 column-gap，但某些旧浏览器或复合布局中可能未完全生效。
- 务必单独写
row-gap: 0，确保垂直方向间隙被彻底清除 - 如果用了
grid-template-rows: 0fr 1fr这类技巧，row-gap仍会作用于显式定义的行之间，必须显式覆盖 - 注意：
gap不影响网格容器边缘，所以即使设为 0，子项和容器边框之间仍可能有 padding 或 border 导致“看起来有空隙”
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
