真正自适应网格必须用 grid-cols-[repeat(auto-fit,_minmax(250px,_1fr)))]，它让浏览器实时计算列数并动态拉伸或换行，配合 grid、合理 gap 和 grid-auto-rows 才能实现响应式布局。
grid-cols-[repeat(auto-fit,_minmax(250px,_1fr))] 是唯一真正自适应的写法
别用 grid-cols-3 或 md:grid-cols-4——它们固定列数，缩放时要么溢出要么留大片空白。真正自适应必须靠 CSS 原生的 repeat(auto-fit, minmax())，Tailwind 通过方括号语法支持它。
这个写法让浏览器实时计算：容器宽度 ÷（单列最小宽 + gap）能塞下几列，有空间就拉伸，没空间就换行。不是“预设几列”，而是“尽力而为”。
-
auto-fit比auto-fill更实用：空列自动塌缩，不会撑出横向滚动条 -
minmax(250px, 1fr)中的250px是底线，不能小于卡片/内容可读宽度；1fr是上限，表示均分剩余空间 - 方括号里空格必须用下划线
_替代，否则构建工具报错（如 Vite 或 Next.js） - 别写
minmax(100px, 1fr)：小屏下会生成窄到文字乱折的列，视觉崩溃
gap 值直接影响 auto-fit 能塞下几列
很多人调了半天发现列数没变，其实是 gap 吃掉了太多宽度。比如容器宽 768px，设 gap-6（1.5rem ≈ 24px），三列之间就有 48px 间隙，实际可用宽度只剩 720px——可能刚好卡在“够 3 列”和“只能 2 列”的临界点。
- 调试时先加
gap-0确认列数是否符合预期，再逐步加回合理值（如gap-4） -
gap是网格原生属性，不占布局空间；用mb-4+mr-4模拟等效间距会破坏网格轨道计算 - 若需不同方向间距，用
gap-x-4和gap-y-2，别混用 margin 类 - 注意：
gap数值参与auto-fit的实时计算，不是“画完格子再加缝”
必须显式加 grid 类，否则 grid-cols-* 全部失效
Tailwind 不会自动给元素加 display: grid。只写 grid-cols-[repeat(auto-fit,_minmax(250px,_1fr))] 而不加 grid，等于没写——浏览器根本不知道这是个网格容器。
立即学习“前端免费学习笔记（深入）”；
- 基础类
grid必须和列定义写在同一元素上，顺序无关（grid grid-cols-[...]或grid-cols-[...] grid都行） - 别把
grid-cols-*加在 Flex 子项上：它只对直系 Grid 容器生效 - 用 DevTools 检查 computed 样式，确认
display: grid和grid-template-columns真实存在 - 如果父容器是
flex，子容器想用 Grid，没问题；但别误把grid-cols-*写在父容器上
高度不一致时，grid-auto-rows 比 grid-rows-* 更可靠
卡片文字量不同、图片尺寸不一，会导致网格行高参差不齐（“阶梯状”错位）。此时硬写 grid-rows-3 会强制切分，反而更糟。
- 用
grid-auto-rows-min或grid-auto-rows-[minmax(120px,_auto)]，让每行至少 120px 高，内容多就撑开，少就收缩 -
grid-rows-*只控制显式行数，对 auto-fit 动态生成的隐式行无效 - 配合
align-items-stretch（默认值），确保所有子项自然拉满行高 - 若卡片内有图片，记得设
h-full+object-cover，避免高度塌陷拖累整行
w-full 或被 flex 压缩），它就退化成单列——这不是 bug，是设计使然。 
