必须显式添加grid类才能启用CSS Grid布局，仅用grid-cols-*等工具类无效；嵌套网格需每层独立声明grid，且gap、place-items等属性需注意作用域与覆盖规则。
Grid容器必须显式声明display: grid
Tailwind默认不自动设display: grid，光写grid-cols-3或grid-rows-2没用——这些只是设置轨道数量的工具类，不是布局模式开关。
常见错误：直接给一个div加grid-cols-4，发现子元素还是流式排列。原因就是缺了grid这个基础类。
- 正确做法：先加
grid（对应display: grid），再叠加列/行/间隙等类 - 如果需要
inline-grid，用inline-grid类，不是grid inline - 响应式场景下，
sm:grid、lg:grid要和sm:grid-cols-2等配对出现，否则断点内仍无网格行为
grid-template-*类不能靠猜，得看源码映射
Tailwind的grid-template-columns、grid-template-rows、grid-template-areas都通过grid-cols-*、grid-rows-*、grid-areas-*间接控制，但它们不是一一对应CSS原值，而是走配置映射。
比如grid-cols-[200px_1fr_2fr]能用，但grid-cols-[repeat(3,_1fr)]在默认配置里不生效——因为Tailwind默认没启用任意值（arbitrary values）或未在theme.extend.gridTemplateColumns里定义repeat别名。
立即学习“前端免费学习笔记（深入）”；
- 想用
repeat()、minmax()、fit-content()，优先试带方括号的任意值语法：grid-cols-[repeat(auto-fit,_minmax(250px,_1fr))] - 自定义命名轨道（如
grid-cols-[sidebar_content]）需在tailwind.config.js中扩展theme.gridTemplateColumns -
grid-areas类只接受预设字符串（如grid-areas-[header_nav_main_footer]），空格会被转成" "，所以不能写grid-areas-["header nav main footer"]
gap、place-items、justify-content混用时顺序影响渲染结果
Tailwind里gap-4、place-items-center、justify-content-between（应为justify-items-between或justify-content？注意：Tailwind没有justify-content类，只有justify-items和justify-self）这些类作用于不同维度，但叠加后容易互相覆盖或失效。
典型现象：加了place-items-center，又加justify-items-start，结果居中失效——因为后者覆盖前者；或者gap-6看起来没生效，其实是被父容器的flex或block上下文吃掉了。
-
place-items是justify-items+align-items的组合，优先级高于单独的justify-items或align-items -
gap只对grid和flex容器有效，如果父元素不是grid或flex，gap类会被忽略 - 子元素上用
self-start/self-end会覆盖容器级的justify-items，但不会影响place-items里的align-items部分
响应式Grid嵌套时，子网格需独立声明grid
很多人以为给父容器加md:grid-cols-2，里面子元素再加grid-cols-3就能实现“大格子里套小网格”，结果子元素只是按grid-cols-3生成了列数，但没形成新网格上下文——它依然属于父网格的某个单元格。
真正嵌套网格，每个层级都得自己声明grid。否则grid-* 类只是被当成普通尺寸类解析，不触发布局引擎。
- 子容器要成为独立网格，必须带
grid（或inline-grid）类，哪怕只是grid grid-cols-3 - 嵌套时注意
gap作用域：父gap-4控制父项间距，子gap-2只作用于子网格内部 - 避免过度嵌套：三层以上grid嵌套易导致可维护性下降，浏览器渲染压力也会上升，尤其在移动端
Grid在Tailwind里不是“开箱即用”的抽象，它始终是CSS Grid的快捷写法。所有类名背后都是真实属性，理解这一点，比记多少类名都管用。最常被跳过的，就是那个看似最简单的grid类——没它，后面全白搭。
