必须添加 grid 类启用 Grid 上下文，因 grid-cols-[...] 仅生成 grid-template-columns 而不改变 display；推荐用 minmax(0,1fr) 防溢出，并按 grid-cols-1 md:grid-cols-[240px\_1fr\_240px] 顺序响应式覆盖。
直接用 grid-cols-[240px_1fr_240px] 就能实现「左栏固定 + 主区弹性 + 右栏固定」的三栏仪表盘，但必须同时加 grid 类，否则纯靠列定义不生效。
为什么 grid-cols-[240px_1fr_240px] 不起作用
最常见原因是父容器没启用 Grid 上下文。Tailwind 的列工具类只生成 grid-template-columns，不改 display。即使写了 grid-cols-[240px_1fr_240px]，若容器仍是 block 或 flex，这条规则完全被忽略。
- 必须显式添加
grid（对应display: grid）或inline-grid - 在 DevTools 的 Computed 面板里确认
display确实是grid，且grid-template-columns值已正确渲染 - 别把该类加在 Flex 子项上——它只对直系 Grid 容器有效
如何让中间列真正“自适应”且不撑破容器
单纯写 1fr 有时会因内容过长导致横向滚动或布局错位。健壮写法是用 minmax(0, 1fr)，它允许列收缩到 0，避免溢出。
- 推荐写法：
grid-cols-[240px_minmax(0,1fr)_240px] - 若项目启用了 JIT 模式，方括号内空格必须转为下划线：
grid-cols-[240px_minmax(0,1fr)_240px]，否则构建失败 - 固定列（如
240px）建议搭配grid-flow-col或显式grid-row，防止自动流行为导致右侧栏跳到第二行
响应式三栏怎么切才不翻车
仪表盘常需在小屏退化为单列，但很多人写 grid-cols-[240px_1fr_240px] md:grid-cols-1，结果发现中屏（768–1024px）变成三列挤在一起——因为 md:grid-cols-1 是“最小宽度 768px 时生效”，而 grid-cols-[...] 默认在所有断点生效，没被覆盖。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：先写基础单列，再逐级增强，例如
grid-cols-1 md:grid-cols-[240px_1fr_240px] - 如果想在 sm（640px）就切双栏（比如隐藏右栏），得补上
sm:grid-cols-[240px_1fr] - 自定义断点（如删了
sm）会导致sm:前缀类完全不生成 CSS，务必检查tailwind.config.js中的theme.screens
间距和错位问题怎么绕开
用 gap-4 控制三栏间隙是唯一可靠方式。别用子项的 margin 或父容器 padding 替代——它们会干扰轨道计算，尤其在跨列或动态增删卡片时容易错位。
-
gap-4作用于网格轨道之间，不占布局空间，也不影响grid-auto-fit推算 - 若左右栏高度不一致导致主区对齐偏移，加
align-items-start或justify-items-start显式控制对齐 - 卡片内容高度差异大时，给主区加
min-h-96或用grid-auto-rows-[minmax(20rem,auto)]（v3.4+）统一行高
真正卡住人的从来不是语法，而是忘了 grid 类本身才是开关；另外，minmax(0, 1fr) 和响应式断点覆盖顺序，这两个细节几乎每次重构都会漏一次。
