必须显式声明display: grid或inline-grid才能启用网格布局，仅用grid-cols-等类无效；列宽数值为等分份数而非像素；行轨道需grid-rows-显式定义，否则row-span-*可能失效；响应式需各断点独立声明。
Grid容器必须显式声明display: grid
Tailwind的grid、grid-cols-3这些类名本身不自动触发网格布局，它们只是设置grid-template-columns等属性——前提是父元素已是display: grid或display: inline-grid。
常见错误现象：grid-cols-2写了但元素还是垂直堆叠，没分列。
- 必须加
grid类（对应display: grid）或inline-grid - 别只写
grid-cols-*或grid-rows-*就以为完事了 - 若用
gap类，也依赖父级已是grid容器，否则无效
列宽定义用grid-cols-系列，但数值不等于像素
grid-cols-6不是“6px”，而是把容器划分为6等份（fr单位），而grid-cols-[1fr,2fr,auto]这种任意值需配合grid-cols插件或直接写grid-template-columns。
使用场景：响应式栅格、卡片列表、表单布局。
立即学习“前端免费学习笔记（深入）”；
-
grid-cols-1到grid-cols-12是预设的等分fr划分 -
grid-cols-2≡grid-template-columns: repeat(2, minmax(0, 1fr)) - 要混合单位（如
200px 1fr），得用grid-cols-[200px_1fr]（需启用JIT引擎+安全配置）或内联style - 移动端优先时，常用
grid-cols-1 md:grid-cols-2 lg:grid-cols-3
行高和跨行控制靠grid-rows-和row-span-，但默认不设行轨道
Tailwind默认只生成列轨道（grid-template-columns），grid-rows-*类才生成行轨道；没设行轨道时，row-span-2可能失效或行为异常。
常见错误现象：元素用了row-span-2却没变高，或撑开容器而非占位。
-
grid-rows-2创建2行等高轨道；grid-rows-[100px,auto]需JIT支持 -
row-span-2仅在有明确行轨道时才有效（否则回退为grid-row: span 2，依赖内容高度） - 想让某子项跨满所有行？用
row-span-full，但父容器必须有定义好的行数（如grid-rows-4）
响应式断点下Grid类名不自动继承，必须重复声明
md:grid-cols-2不会让sm:grid-cols-1自动生效——Tailwind不维护“层级继承”，每个断点都是独立开关。
性能影响：多写几个断点类会略微增加CSS体积，但现代构建工具已做tree-shaking，实际影响可忽略。
- 错例：
grid-cols-1 md:grid-cols-2→ 在sm（640px）下仍是grid-cols-1，但md（768px）才生效，中间断层 - 正例：
grid-cols-1 sm:grid-cols-2 md:grid-cols-3，逐级覆盖 - 如果只想要“小屏单列、大屏双列”，写
grid-cols-1 md:grid-cols-2即可，但心里得清楚sm到md之间仍是单列
真正容易被忽略的是：Grid轨道定义（grid-cols-/grid-rows-）和子项定位类（col-span-/row-span-）必须同步响应式，否则布局在断点切换时会错乱。比如col-span-2在sm下可能超出当前列数，得配sm:col-span-1兜底。
