auto-fit比auto-fill更适合卡片响应式布局，因其折叠空轨道使有内容的列均分剩余空间，避免右侧留白或横向滚动；而auto-fill强制保留所有轨道，易致空白或溢出。
:has() 不能控制列数，别白费劲写 .grid:has(> div:nth-child(5)) { grid-template-columns: repeat(5, 1fr); } —— 浏览器直接忽略整条规则，因为 grid-template-columns 不在 :has() 支持的可响应属性列表里。
auto-fit + minmax() 是唯一真正生效的方案
它不是“按数量算列”，而是让浏览器根据容器宽度和每列最小宽度，动态生成轨道数。子元素数量只间接影响：项少但容器宽，照样能塞多列；项多但容器窄，就自然换行。
-
minmax(240px, 1fr)中的1fr是关键——它告诉浏览器“上限由剩余空间决定”，不是固定值 - 写成
minmax(240px, 300px)或minmax(240px, max-content)就失效：列宽被锁死，不再随容器缩放 -
repeat(auto-fit, minmax(240px, 1fr))必须配合gap和明确的父容器宽度（比如width: 100%或max-width），否则可能退化为单列或不渲染
auto-fit 和 auto-fill 别混用，行为完全相反
你看到的“列数变少了”，大概率是选错了关键字。
-
auto-fit：空轨道被合并，已有列拉伸填满容器——适合卡片流、图标栏等“有多少内容占多少位”的场景 -
auto-fill：预留所有可能轨道，空列仍占gap间距——小屏下可能首行全是空白，用户得横向滚动才能看到第一张图 - 两者语法一样，只差一个词，但视觉密度天差地别；95% 的响应式网格应选
auto-fit
子元素高度不一致时，别指望 grid-auto-rows 解决对齐
设了 grid-auto-rows: 1fr 却发现卡片底部按钮错位？这不是 bug，是 Grid 的正常行为。
-
grid-auto-rows只作用于“隐式行”（超出显式定义的行之后新增的行），对单行内高度差异无效 - 同一行中，一张带长文本的卡片会拉高整行，另一张纯图卡片只能跟着撑高
- 正确做法是在每个
.card内部用display: flex; flex-direction: column; justify-content: space-between控制内部对齐 - 真要兜底行高，用
grid-auto-rows: minmax(200px, auto)，既保最小高度，又不限死上限
repeat(auto-fit, minmax(...))，而是接受：Grid 的列数由容器宽度驱动，不是 DOM 子节点数量驱动。强行绑定数量，等于在对抗浏览器的布局模型。 
