移动端Grid列数不对因repeat(3,1fr)不响应容器宽度，应改用repeat(auto-fit,minmax(280px,1fr)))；gap失效多因Safari旧版兼容性或overflow:hidden裁剪；卡片高度不一致需设align-items:start和min-height；断点推荐min-width而非max-width，优先用container queries。
Grid 在移动端多列布局中为什么经常“列数不对”
因为 grid-template-columns 里写的 repeat(3, 1fr) 在小屏上依然强行分三列，没考虑容器宽度是否撑得开。浏览器不会自动降为 2 列或 1 列——它只会把每列压窄，甚至导致内容溢出或文字换行错乱。
真正该用的是基于最小宽度的自动列数控制：
- 用
repeat(auto-fit, minmax(280px, 1fr)))：让每列至少 280px 宽，容器够宽就多列，不够就少列，auto-fit还会合并空余空间 - 别用
auto-fill——它会渲染所有可能列（包括空列），影响语义和可访问性 - 280px 是个经验值，对应 iPhone SE 屏宽减去左右边距；若内容含固定宽组件（如卡片带 200px 图片），这里要留足余量
移动端 Grid 布局中 gap 失效或错位
gap 在 Safari iOS 15.4 之前不支持 row-gap/column-gap 单独写法，只认 gap 合写。更隐蔽的问题是：当父容器设了 overflow: hidden（比如轮播外层），而子项因 gap 推挤后总宽超容器，就会被截断——看起来像 gap “消失”，其实是子项被裁了。
- 统一用
gap: 12px，避免拆写row-gap和column-gap - 检查父容器是否有
overflow: hidden或width硬约束，必要时加box-sizing: border-box - 在 iOS 旧版 Safari 中，
gap对grid-auto-flow: column布局无效，此时改用display: flex+flex-wrap更稳妥
如何让 Grid 多列在折叠/展开时保持高度一致
移动端卡片式布局常遇到：一列内容多、一列内容少，导致整行高度被拉高，视觉割裂。Grid 默认按行对齐（align-items: stretch），但若某张卡片内部用了 height: 100% 又没设 min-height，反而会塌陷。
立即学习“前端免费学习笔记（深入）”；
- 给 grid 容器加
align-items: start，让每项从顶部对齐，而非拉伸填满 - 卡片自身用
min-height: 120px（根据内容基线定）+display: flex; flex-direction: column控制内部元素垂直分布 - 避免在卡片内对
img设height: 100%，优先用aspect-ratio: 4/3+object-fit: cover，兼容性更好
Grid 响应式断点与媒体查询配合的常见误操作
很多人写 @media (max-width: 768px) { .grid { grid-template-columns: 1fr; } }，结果在 iPad 横屏（768px 宽）下反而退化成单列——因为 max-width 匹配的是视口宽度，不是设备类型，且 768px 是常见断点临界值，极易被误判。
- 用
min-width断点更可靠：@media (min-width: 769px)表示“大于 iPad 竖屏”，避免临界抖动 - 更推荐脱离像素断点：用
container queries（需加container-type: inline-size到父容器），但注意 Chrome 105+ / Safari 16.4+ 才稳定支持 - 如果必须用媒体查询，把移动端默认样式写在最外层，PC 样式放
@media (min-width: 769px)里——符合移动优先逻辑，也减少覆盖冲突
Grid 的灵活性恰恰藏在 minmax() 和 auto-fit 的组合里，而不是靠一堆媒体查询硬切。真要加断点，优先考虑内容承载力，而不是设备尺寸数字本身。
