grid-template-columns: 1fr 1fr 不适合后台卡片两列布局，因其无法防止内容撑开列宽、导致不对齐或横向滚动；应改用 minmax(320px, 1fr) minmax(600px, 2fr) 并配合 min-width: 0、overflow-wrap: break-word 及媒体查询退化为单列。
grid-template-columns: 1fr 1fr 不适合后台卡片两列布局
直接写 grid-template-columns: 1fr 1fr 看似简单，但后台卡片常含表格、长字段名、固定宽高比图表等，容易导致列宽被内容撑开、左右不对齐甚至横向滚动。真正要的是“视觉上稳定两列 + 内容不溢出 + 小屏自动退化为单列”。
关键不是“两列”，而是“两列感可控”：左侧卡片负责导航/筛选/状态摘要，右侧承载主数据或详情表——它们语义不同，宽度需求也不同。
- 用
minmax(320px, 1fr)替代1fr，防止小屏下单卡过窄（如手机竖屏下卡片标题换行混乱） - 右侧若含
<table>或长 URL，必须加min-width: 0和overflow-wrap: break-word，否则 Grid 会优先保内容而非守列宽 - 别依赖
justify-content: center居中两列——它会让整个网格块居中，留白在两侧；要的是两列紧贴容器边缘、中间有间隙
gap 比 margin 更可靠，但要注意父容器 box-sizing
gap: 1.5rem 是控制两列间距的唯一推荐方式。它只作用于网格项之间，不会污染外边距，也不需要写 :first-child 或负 margin 去修正首尾多出的半倍间距。
但一个易忽略的坑：gap 的值不计入容器 width，如果父容器写了 width: 100% 却没设 box-sizing: border-box，加上 padding 后可能意外触发水平滚动条。
立即学习“前端免费学习笔记（深入）”；
- 务必给 Grid 容器加
box-sizing: border-box - 如果已有
padding: 1rem，且希望卡片内容区宽度 = 容器宽 − 两边 padding − 中间 gap，则右侧卡片内需额外设width: calc(100% - 1rem)（仅当内容强依赖精确宽度时） - 旧版 Safari（iOS 16.4 以下）需补
-webkit-gap: 1.5rem，但仅限 Grid 场景；Flex 中 gap 不支持前缀
响应式退化为单列，必须整套重写 grid-template-columns
后台页面在平板横屏或窄桌面（如 1280px 宽度）仍需两列，但在手机（≤768px）必须退化为单列。这时不能只改某列宽度，而要覆盖整个列定义。
常见错误是媒体查询里只写 grid-template-columns: 1fr，但原样式用了内联 style 或更高优先级规则，结果失效。
- 默认样式写两列：
grid-template-columns: minmax(320px, 1fr) minmax(600px, 2fr)（左窄右宽，适配后台常用结构） - 响应式覆盖写单列：
@media (max-width: 768px) { .card-grid { grid-template-columns: 1fr; } } - 如果退化后仍需保留“左侧导航+右侧内容”的语义，建议配合
grid-template-areas，比如默认"sidebar main"，小屏改为"sidebar" "main"，更利于逻辑维护
卡片内部高度不一致？align-items: stretch 不够用
Grid 默认 align-items: stretch，但后台卡片里常有未设 height 的图表、position: absolute 的 badge、或 flex 子容器——这些都会让卡片高度塌缩，造成阶梯状错位。
解决方向不是强行统一高度，而是让每张卡片内部具备弹性约束能力。
- 给每张卡片加
display: flex; flex-direction: column;，再对内容区（如.card-body）设flex: 1，让它撑满剩余空间 - 图片/图表容器加
aspect-ratio: 16/9或padding-top: 56.25%技巧兜底，避免拉伸变形 - 避免在卡片上直接设
height: 100%—— Grid 的1fr高度分配在多数后台场景下不可靠，尤其当内容动态加载时
实际布局复杂点往往不在 Grid 本身，而在卡片内容是否“驯服”：一张没设 min-width: 0 的表格、一段没断行的 API 路径、一个忘了 object-fit 的缩略图，都足以让精心写的 auto-fit 或 minmax() 失效。先控内容，再调布局。
