推荐用 repeat(auto-fill, minmax(280px, 1fr)) 实现自适应网格，配合分层 grid 布局与 touch-action、SVG 渲染优化移动端体验。
直接用 grid-template-columns: repeat(auto-fill, minmax()) 就能撑起看板骨架，但真正决定成败的是断点控制粒度、卡片最小宽度取值，以及是否为移动端保留可点击区域——这些细节不调好，PC端看着整齐，手机上一划就卡顿或点不中。
为什么不用媒体查询硬写列数？
供应链看板常要适配从 320px 手机竖屏到 3840px 超宽大屏的设备，硬写 @media (min-width: 600px)、@media (min-width: 900px) 等断点会漏掉很多中间尺寸。比如 iPad Pro 横屏（1024px）和 Surface Pro（1280px）行为不一致，用户滑动时布局突然跳变，图表重叠风险极高。
更关键的是：业务方随时可能新增一个指标卡片，你得同步改所有断点里的 repeat(3, 1fr) → repeat(4, 1fr)，维护成本指数级上升。
推荐做法：
立即学习“前端免费学习笔记（深入）”；
- 用
repeat(auto-fill, minmax(280px, 1fr))作为默认规则，让浏览器自动算列数 -
280px是移动端单列卡片的合理最小宽度（含 padding + border），低于此值文字挤成一团，图标点不中 - 搭配
gap: 1rem，避免小屏下间隙过大吞掉可用空间
如何让看板头部/侧边栏/主图表区真正响应式？
单纯靠卡片网格不够——看板通常有固定功能区：顶部筛选栏、左侧导航、中间多张 ECharts 图表、右下角状态汇总。这些区域不能随卡片一起“流动”，否则筛选控件被挤到图下方，操作链断裂。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
正确解法是分层定义容器：
- 外层用
display: grid定义语义区域：grid-template-areas划出"header header header" "nav main main" "nav footer footer" - 内层
.main区域再嵌套一层卡片网格，用repeat(auto-fill, minmax(320px, 1fr))，与外层解耦 - 给
.nav设min-width: 240px，防止小屏下被压缩到无法阅读文字
注意：不要对 grid-area 元素再设 flex 布局，二者混用容易触发渲染冲突，尤其在 Safari iOS 16+ 上出现空白区域。
移动端交互失灵？检查 gap 和 touch-action
看板在手机上图表重叠、按钮点不中，90% 是因为：
-
gap值过大（如设了2rem），导致小屏下卡片实际宽度不足 100px，手指误触相邻卡片 - 图表容器没加
touch-action: manipulation，iOS Safari 默认禁用快速双指缩放，但也会连带抑制单指滑动响应 - ECharts 实例未启用
renderer: 'svg'，Canvas 渲染在低端安卓机上频繁掉帧，造成“点不动”的错觉
实操建议：
- 小屏下把
gap降到0.5rem，用@media (max-width: 480px)单独覆盖 - 所有图表父容器加
style="touch-action: manipulation;" - 初始化 ECharts 时显式传
{ renderer: 'svg', devicePixelRatio: 1 }，避免高清屏下模糊和性能抖动
最易被忽略的一点：minmax() 的第二个参数写 1fr 没问题，但千万别写成 minmax(280px, 1fr) 后又在外层容器加 width: 100vw——这会让某些安卓 WebView 计算出负值列宽，直接崩掉整个网格。始终用 max-width: 100% 替代。
