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 别混用，行为完全相反

你看到的“列数变少了”，大概率是选错了关键字。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 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 子节点数量驱动。强行绑定数量，等于在对抗浏览器的布局模型。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！