Grid容器需配repeat(auto-fit, minmax(240px, 1fr)))防塌，240px兼顾iPhone SE宽度，auto-fit收缩空列，配合gap和box-sizing确保小屏适配。
Grid容器的minmax()和auto-fit怎么配才不塌？
直接写 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))) 多数情况能跑通，但容易在小屏上撑破容器或留白过大。关键不是数值本身，而是minmax()里最小值不能设死——比如用250px，遇到 iPhone SE 这类窄屏（375px 宽），单列也得留出左右边距，实际可用宽度可能只剩 320px，反而触发两列挤在一起。
- 推荐用相对单位：
minmax(28ch, 1fr)或minmax(240px, 1fr)，后者更稳妥 -
auto-fit和auto-fill行为不同：auto-fit会收缩空轨道，auto-fill保留所有轨道（哪怕空着），响应式场景优先选auto-fit - 必须加
grid-gap（或gap），否则卡片紧贴边缘，视觉上像没响应
卡片内部内容高度不一致，怎么让grid-auto-rows不翻车？
很多人以为设了 grid-auto-rows: 1fr 就能自动拉平，结果发现标题短的卡片高度被压扁、文字换行错乱。这是因为 1fr 是按网格轨道分配空间，不是按内容撑开；而卡片内文字、图片、按钮高度天然不齐，强行拉伸会破坏语义流。
- 真正有效的做法是：**不对卡片设高度约束，只对内部元素做截断或限制**，比如用
display: -webkit-box控制标题行数，或给描述文字设max-height+overflow: hidden - 如果真要统一高度，用
grid-auto-rows: minmax(min-content, max-content)比1fr更安全 - 避免在卡片上写
height: 100%—— Grid 轨道高度未定义时，百分比高度会失效
移动端需要堆叠成单列，但@media里重写grid-template-columns太重复？
没必要每个断点都写一遍 repeat()。CSS Grid 支持用 subgrid（暂不推荐）或更实用的「单规则覆盖」策略：把基础布局写在默认样式里，只在媒体查询中改关键参数。
- 写法示例：
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))); gap: 1.2rem; } @media (max-width: 480px) { .card-grid { grid-template-columns: 1fr; } } - 注意：不要在媒体查询里写
repeat(1, 1fr)，直接1fr更简洁且兼容性更好 - 若需适配 iPad 等中屏设备，加一条
@media (min-width: 481px) and (max-width: 768px)，设为repeat(auto-fit, minmax(320px, 1fr)))即可
卡片带阴影/圆角，为什么overflow: hidden会让box-shadow被裁掉？
这是 Grid 布局里高频踩坑点：给卡片加了 border-radius 和 box-shadow，再套一层 overflow: hidden（比如为了隐藏图片溢出），结果阴影直接消失。根本原因是 overflow: hidden 创建了新的层叠上下文和剪裁边界，box-shadow 属于该容器的绘制层，超出部分被裁。
立即学习“前端免费学习笔记（深入）”；
- 解法一：去掉卡片自身的
overflow: hidden，改用子元素（如图片）设object-fit: cover+border-radius - 解法二：用伪元素模拟阴影：
@supports (backdrop-filter: blur(1px))配合::before绘制偏移阴影，绕过裁剪 - 解法三：最省事——接受阴影被裁，改用
filter: drop-shadow()，它不受overflow影响，但注意性能略低
aspect-ratio（IE 不支持）就老老实实设 padding-top 百分比占位，否则 Grid 自动分配空间时，图片加载前高度塌陷，导致布局跳动。 
