repeat(auto-fill, minmax(240px, 1fr)) 大概是现在最省事的自适应网格写法：不用写断点，格子自己按容器宽度排布。这时候 auto-fit 看起来只是同义词，直到你的项目不够填满一行。
两者都会先做的事
不管 fill 还是 fit，第一步一样：算出容器里能放下几个不小于 240px 的轨道。
容器 1000px：4 × 240 = 960 ≤ 1000，5 × 240 = 1200 > 1000。所以是 4 条轨道，每条 1000/4 = 250px。
区别在第二步
- auto-fill：4 条轨道全部保留，空的也占着位置。2 个项目就只占前两条，各 250px，右边 500px 留白。
- auto-fit：把空的轨道折叠成 0 宽，然后剩下的轨道重新分享全部空间。2 个项目 → 2 条轨道各 500px。
同样 2 个项目、同样 1000px 容器，一个 250px 宽，一个 500px 宽。
什么时候要哪个
这不是”哪个更好”，是两种设计意图：
- auto-fill：项目不满也保持节奏。卡片列表用它——只有 2 张卡片时，你不想看到它们变成两个巨型方块。
- auto-fit：让剩下的铺满。图片墙、产品展示用它——2 张图铺满一整行反而更自然。
判断方法很简单：把项目删到只剩一个，看那个孤零零的卡片变成整行宽，能不能接受。 能接受就 auto-fit，不能就 auto-fill。
那个 240px 是什么
minmax(240px, 1fr) 里的 240px 是”每列的最小可接受宽度”，不是精确列宽。它同时承担了”什么时候换列”的职责——所以它必须由最长的一条内容决定，不能凭手感挑。
我踩过这个：一张卡片里有个很长的英文型号名，240px 在手机上放不下，网格在窄屏上直接横向溢出。这类问题和 flex 里 min-width: auto 是同一族——你设的最小宽度不是内容的最小宽度，规范取的是两者里更大的那个。要么把 240 调大到够用，要么让那条内容能断行。
dense 的代价
grid-auto-flow: dense 会把后面能塞进前面空位的项提前。视觉上更紧凑，代价是视觉顺序和 DOM 顺序不一致：键盘 Tab 仍然按 DOM 走，读屏也按 DOM 朗读，于是”看起来第三个”的东西其实是第四个被聚焦。
纯图墙、纯装饰性排布可以用。只要里面有链接、按钮、表单，就别开 dense——为了省那点空白，让键盘用户失去位置感，不值。