Grid布局应优先保持原子性，仅在重复≥3处、具业务语义或含非标准值时抽象；动态列数需用clsx、safelist或内联style；group/peer联动避免穿透选择器；grid-area不宜封装为工具类。
Grid 布局类写太多？先确认是否真需要抽象
直接在 HTML 里写 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 看似冗长，但只要这个网格结构只出现在一个地方，就别急着抽成 class。Tailwind 的原子性优势正在于此：改列数不用查定义、删 gap 不用翻 CSS 文件。抽成 .card-grid 反而锁死语义——哪天要加 xl:grid-cols-5 或换 gap-6，就得改两处。
真正该抽的信号是：
– 同一套列配置 + 间距 + 响应式断点，在 ≥3 个组件中重复出现
– 有明确业务语义（比如 product-grid、testimonial-cards）
– 包含非标准值（如 grid-cols-[repeat(auto-fill,minmax(280px,1fr))))]），手动写太易错
动态 Grid 列数怎么写才不炸体积
Tailwind 不解析 JS 表达式，grid-cols-${cols} 这种写法在生产构建时会被 PurgeCSS 当作未使用类直接干掉——不是 bug，是设计约束。
安全做法分三档：
– 列数固定且少（如 1/2/3/4）：用 clsx 拼条件类，clsx('grid', { 'grid-cols-1': cols === 1, 'grid-cols-2': cols === 2 })
– 列数多但可枚举（如 2–6）：在 tailwind.config.js 的 safelist 里加正则，/^grid-cols-[2-6]$/
– 列数完全动态（如用户拖拽调整）：放弃 grid-cols-，改用 grid-template-columns: repeat(${cols}, minmax(0, 1fr))) 写内联 style，或用 @layer utilities 扩展自定义工具类（但注意：这会绕过 JIT 扫描，慎用）
立即学习“前端免费学习笔记（深入）”；
嵌套 Grid 和 group/peer 联动时的冗余陷阱
Grid 容器里放卡片，卡片悬停要高亮整个格子？别写 group-hover:[&>*]:bg-blue-50 这种穿透式选择器——它既难读，又因嵌套层级变化极易失效。
更干净的解法：
– 外层 Grid 项加 group
– 卡片自身加 group-hover:bg-blue-50（哪怕卡片是 div > div > article 深度）
– 需要控制同级元素（比如标题+按钮联动）？把触发元素设为 peer，目标元素用 peer-hover:text-red-500，但必须保证 peer 元素在 DOM 中位于目标元素之前
注意：group 不支持跨 Grid 区域影响，如果想让一个区域 hover 影响另一个区域的样式，得靠 JS 控制 class 或改用 CSS :has()（目前仅 Chromium 支持，生产环境慎用）
Grid 模板区域名（grid-area）要不要保留
grid-area 是 CSS Grid 的核心能力，但 Tailwind 默认不提供对应工具类。有人会自己加 @layer utilities { .area-header { grid-area: header; } }，这看似省事，实则埋雷：
– 每个区域名都新增一个 class，HTML 里还得写 class="area-header"，没比直接写 grid-area: header 省多少
– 区域名是语义化的，不同页面区域名不同（hero、cta、footer），硬编码进工具类反而降低复用性
– 更推荐方案：在组件 scoped style 里写原生 grid-area，或用 CSS-in-JS 动态注入，避免污染全局工具类池
真正值得封装的是重复的模板结构，比如 grid-template-areas: "header header" "main sidebar" "footer footer"，这种可以抽成 @apply 或组件 props 传入，而不是单个区域名。
