核心是用auto-fit实现列数自适应：minmax(250px,1fr)为起点，gap控制间隙，卡片用flex+height:100%等高，容器需有高度上下文。
用 grid-template-columns: repeat(auto-fit, minmax()) 控制列数自动增减
核心就是这一行：容器不写死列数，而是让浏览器根据宽度“算出来”。auto-fit 是关键——它只生成有内容的列轨道，并把空轨道收缩掉，剩余空间均分给现有卡片；auto-fill 则会硬占位，哪怕没内容也留白，小屏下容易右侧大片留空甚至触发横向滚动。
常见错误现象：minmax(280px, 1fr) 在 800px 宽容器里本该放 2–3 列，结果只显示 1 列。大概率是 minmax 第一个参数设太大（比如 320px），或父容器没宽度上下文（如外层 div 没设 width 或 max-width）。
-
minmax(250px, 1fr)是较稳妥的起点：文字可读、图片不挤，小屏也能塞进至少一列 - 第一个参数必须是
<length></length>（如250px），不能是em或auto，否则浏览器可能静默降级 - 第二个参数只能是
1fr或max-content，写成2fr或minmax(250px, auto)无效
gap 必须用，别碰子项的 margin
gap 是 Grid 原生间隙控制，不参与 minmax() 计算，只作用于轨道之间；而子项自己加 margin 会侵占实际可用宽度，直接破坏 1fr 的均分逻辑——尤其在小屏下，minmax(250px, 1fr) 的最小宽度约束就失效了。
- 正确写法：
gap: 16px（行列同距）或gap: 16px 8px（先行后列） - 子项上删掉所有
margin，包括margin: 0 auto这类居中尝试 - 如果卡片内部需要内边距，统一用
padding，它不影响网格轨道计算
卡片内部必须用 flex + height: 100% 才能真正等高
align-items: stretch 默认会让卡片拉伸填满行高，但这只是“视觉拉伸”，如果卡片内部结构没配合，高度还是由内容撑开——比如底部按钮悬空、标题和描述高度不一致，整行看起来就参差不齐。
- 卡片根元素加
display: flex; flex-direction: column; height: 100% - 删掉卡片上任何
height、max-height、min-height，它们会阻止拉伸；如需兜底高度，改用min-height: 0 - 底部按钮用
margin-top: auto推到底，别用position: absolute——后者脱离文档流，高度计算中断 - 图片加
object-fit: cover或aspect-ratio，避免加载抖动破坏等高节奏
别忽略容器自身的高度上下文
Grid 容器得有可计算的高度，align-items: stretch 和 grid-auto-rows: minmax(12rem, auto) 才有东西可拉。如果整个网格区域渲染高度为 0（比如父级是 display: inline 或没内容又没设 min-height），再准的 Grid 规则也白搭。
最容易被忽略的是：Grid 不会主动给自己“撑高”。它要么靠子项内容自然撑开，要么你得明确给容器设 min-height 或继承一个有高度的父级。没有这个前提，1fr 和 stretch 全部失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
