分页卡片布局必须禁用隐式轨道并保持DOM顺序：设grid-auto-rows:0px、显式定义grid-template-rows、禁用grid-auto-flow:dense；卡片需自身为grid容器统一内部结构，并用媒体查询切换列数模板。
直接用 grid-template-columns + auto-fit + minmax() 就能撑起动态列数的卡片流，但真要“复杂分页”，关键不在 Grid 本身，而在如何让每页内容独立成块、不被隐式轨道干扰——否则翻页时卡片会错位、高度不一致、间距崩坏。
为什么 grid-auto-flow: dense 不适合分页卡片
它会让后一页的卡片“插队”到前一页留下的空行里，视觉上乱序，可访问性失效，而且分页逻辑（比如 slice(0, 12)）和 DOM 顺序脱节。分页必须保持源顺序与渲染顺序严格一致。
-
grid-auto-flow: dense只对未显式定位的自动放置项生效；一旦你给某张卡片写了grid-column: span 2，dense 就不再管它 - 分页容器若设了
height: 600px并启用overflow-y: auto，dense 可能导致滚动锚点偏移 - Firefox 在嵌套分页容器中偶现 dense 错位，Chrome/Safari 表现也不完全一致
分页卡片容器必须禁用隐式轨道扩张
默认情况下，Grid 遇到超出预设行列的内容，会自动创建新行（grid-auto-rows），而这些隐式行的高度是 auto，导致每页卡片高度参差不齐。解决办法是显式截断并控制轨道行为。
- 给分页容器加
grid-auto-rows: 0px—— 强制隐式行不占空间，避免撑开容器 - 用
grid-template-rows: repeat(4, 1fr)显式定义每页固定行数（如每页 4 行），再配合grid-auto-flow: row让卡片按序填入 - 若需每页固定卡片数（如 12 张），优先在 JS 层切片，不要依赖 Grid 自动换行；否则
repeat(auto-fill, minmax(280px, 1fr)))会因容器宽度微小变化导致列数波动，影响页边界
卡片自身必须设 display: grid 且禁用内容溢出
外层是分页网格，单张卡片内部若用 Flex 或纯块级流，图片、标题、描述高度不一，会导致整行卡片基线错乱。必须让每张卡片成为独立网格容器，统一约束内部结构。
- 卡片根元素设
display: grid; grid-template-rows: auto 1fr auto; row-gap: 8px，确保头/体/尾区域分离 - 文字容器（如摘要）加
min-height: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2防止撑高 - 图片用
aspect-ratio: 4/3; object-fit: cover; width: 100%，避免拉伸变形或留白不均 - 绝对不能在卡片上写
height: 100%—— 它会继承隐式行高，而隐式行高不可控
响应式分页卡片必须媒体查询重写 grid-template-columns
minmax(280px, 1fr) 只控制单列最小宽度，不改变列数。真要实现“桌面 4 列 → 平板 2 列 → 手机 1 列”，必须靠媒体查询切换模板，否则卡片会在窄屏下被硬压缩或换行错位。
- 桌面：
grid-template-columns: repeat(4, minmax(280px, 1fr))) - 平板：
@media (max-width: 768px) { grid-template-columns: repeat(2, minmax(240px, 1fr))) } - 手机：
@media (max-width: 480px) { grid-template-columns: 1fr } - 别用
grid-template-columns: repeat(auto-fit, ...)做分页容器——它会让每页卡片数浮动，破坏分页语义
最易被忽略的是：分页容器的 gap 和卡片内部的 gap 必须层级隔离，外层用 gap 控制卡片间距，内层用 row-gap 控制卡片内容间距，混用会导致计算偏差。另外，所有卡片必须用 box-sizing: border-box，否则 padding/border 会额外增加宽度，让 minmax() 失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
