直接用 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) 可自动适配列数，但需配合合理最小宽度、精细断点、移动端点击区域保障及语义区域分层，才能实现全端可用。
直接用 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) 就能撑起看板骨架，但真正决定成败的是卡片最小宽度取值、断点控制粒度，以及是否为移动端保留可点击区域——这些不调好，PC端看着整齐，手机上一划就卡顿或点不中。
为什么不能只靠 Grid 自动响应？
CSS Grid 本身不监听视口变化，repeat() 中的 minmax() 只在初始渲染时计算一次列数，后续缩放窗口或旋转屏幕不会自动重排。必须配合媒体查询或 JavaScript resize 监听才能触发重布局。
- 常见错误现象：
grid-template-columns: 1fr 1fr 1fr写死后，在 iPhone 竖屏下仍强行三列，卡片被压缩到不足 120px，文字挤成一团，图标点不中 - 真实场景中，iPad Pro 横屏（1024px）和 Surface Pro（1280px）对同一套
@media (min-width: 900px)响应不一致，导致布局跳变 - 业务方随时新增一个指标卡片，你得同步改所有断点里的
repeat(3, 1fr)→repeat(4, 1fr)，维护成本指数级上升
如何用 auto-fill + minmax() 减少媒体查询依赖？
用 repeat(auto-fill, minmax(280px, 1fr)) 替代硬写列数，让浏览器根据容器宽度自动算出最多能放几列，是目前最轻量、最可持续的解法。
-
280px是移动端单列卡片的合理最小宽度（含 padding + border），低于此值文字可读性骤降，SVG 图标点击热区失效 -
gap: 1rem要慎用：小屏下若设2rem，实际可用宽度可能只剩calc(100vw - 4rem)，导致列数意外减少 - 搭配
justify-items: center和align-items: start，避免窄屏下卡片左对齐后右侧大片留白
如何分层定义语义区域，避免卡片“乱跑”？
看板不是纯卡片堆砌，顶部筛选栏、左侧导航、中间图表区、右下角状态汇总这些功能区必须稳定锚定，否则操作链断裂。
立即学习“前端免费学习笔记（深入）”；
- 外层用
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元素再设display: flex，Safari iOS 16+ 上易触发空白区域
移动端交互失灵，90% 是因为没配这三样
图表重叠、按钮点不中、滑动卡顿，问题往往不在 Grid，而在底层容器和渲染机制。
-
gap过大（如设了2rem）导致小屏下单张卡片实际宽度不足 100px，手指误触相邻卡片 - 图表容器没加
touch-action: manipulation，iOS Safari 默认禁用快速双指缩放，连带抑制单指滑动响应 - ECharts 实例未启用
renderer: 'svg'，Canvas 渲染在高 DPR 屏幕下模糊、缩放失真，且 resize 后需手动重绘
真正难的不是写几行 Grid 代码，而是让每张卡片在 320px 手机竖屏到 3840px 超宽大屏之间，都保持可读、可点、可滑——这需要把 minmax() 的阈值、gap 的缩放系数、touch-action 的触发时机，全放在同一套逻辑里反复验证。
