正确用法是先写grid启用网格，再叠加断点类，如grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4；列宽推荐minmax()配合repeat()实现弹性布局。
grid-template-columns 用法必须匹配容器宽度断点
直接写 grid-cols-3 在小屏上会撑破容器，不是“自适应”，只是固定列数。Tailwind 的响应式前缀本质是媒体查询包裹，所以列数切换必须和断点对齐。
常见错误是只在大屏加 md:grid-cols-3，但没设默认值——小屏下仍继承 grid-cols-1（如果没显式声明，默认不启用 Grid，得先加 grid）。
- 基础写法：先写
grid启用网格，再叠加断点类，例如grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 - 列宽建议用
minmax()配合repeat()，比如grid-cols-[repeat(auto-fit,_minmax(250px,_1fr))]，比纯数字列更弹性 - 注意
sm起始宽度是 640px，默认不覆盖xs（grid-cols-1）
gap 和 justify-items 在 flex 容器里失效
很多人把 grid 类加在 flex 容器上，结果 gap 不生效、子项不按网格排列——Grid 和 Flex 是互斥的布局模型，不能混用。
典型症状：写了 flex gap-4 grid-cols-2，但子元素还是横向排成一串，且间隙不对。
- 确认父容器只含
grid及其相关类（grid-cols-*、grid-rows-*、gap-*等），不含flex、inline-flex -
justify-items控制的是网格项内容对齐（类似 flex 的align-items），不是整个网格对齐；要居中整块网格，得靠外层容器的text-center或place-content-center - 移动端 gap 过大会挤占空间，建议用
gap-x-*/gap-y-*分别控制，避免竖向间隙过大导致内容被截断
auto-fit 和 auto-fill 的行为差异影响换行逻辑
用 grid-cols-[repeat(auto-fit,_minmax(300px,_1fr))] 和 auto-fill 看起来一样，但渲染结果可能差一整行——这是 Grid 规范里最易被忽略的细节。
-
auto-fit会收缩空轨道（即没有内容的列），把剩余空间分给有内容的列；auto-fill则保留所有轨道，哪怕为空 - 多数场景选
auto-fit，它更符合“有多少内容占多少位置”的直觉；只有需要预留固定列位（比如卡片网格带占位符）才用auto-fill - 搭配
minmax()时，第二参数别写死像素值（如minmax(300px, 300px)），否则失去弹性；1fr才能随容器缩放
content 和 minmax() 里的 px 值必须大于子元素最小宽度
如果卡片内有固定宽图片或文本块，而 minmax(200px, 1fr) 设置过小，会导致网格强行压缩内容、文字折行异常甚至溢出。
这不是 Tailwind 的 bug，是 CSS Grid 的约束行为：当轨道最小尺寸小于子元素固有尺寸时，轨道会被撑开，破坏预期列数。
- 检查子元素的
min-width（比如img默认min-width: auto，但设了width: 100%后实际受父容器限制） - 用浏览器调试器看 computed width，把
minmax()第一个参数设为略大于该值（如子项最小需 240px，就写minmax(250px, 1fr)） - 必要时加
overflow-hidden或truncate防文字溢出，但优先调宽轨道而非裁剪内容
真正麻烦的不是写几行 class，而是子元素的内在尺寸和网格轨道的博弈——改一个 minmax() 值，往往得同步调整卡片 padding、字体大小、图片 max-width，才能稳住换行点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
