auto-fit + minmax() 更可靠，因它让浏览器实时计算列数，宽度微变即自动调整列数，避免媒体查询硬切导致的压窄变形；minmax(280px, 1fr)确保每列不塌缩且均分剩余空间，auto-fit收缩空轨道，280–320px最小宽即可自然覆盖手机到4K屏。
直接用 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 就能覆盖绝大多数设备宽度，不需要为 iPad、小屏手机等写一堆 @media —— 真正的响应式是让浏览器自己算列数，不是人去猜断点。
为什么 auto-fit + minmax() 比媒体查询更可靠
这个组合让 Grid 容器根据当前宽度“实时决定”最多放几列，而不是靠预设断点硬切。比如宽度从 760px 缩到 759px，auto-fit 会立刻从 2 列变成 1 列；而写死 @media (min-width: 768px) 在 767px 时仍强行两列，卡片会被压窄变形。
-
minmax(280px, 1fr)表示每列至少 280px，内容少时不会塌缩，内容多时均分剩余空间 -
auto-fit会把没内容的空轨道直接收掉；auto-fill则会保留空轨道，导致最后一列只剩 10px 宽还硬塞一张卡片 - 只要最小宽度设得合理（280–320px），从 320px 手机竖屏到 2560px 4K 屏都能自然过渡，无需额外断点
gap 比 margin 更干净，但要注意 Safari 兼容性
用 gap: 1.5rem 控制卡片间距，它只作用于网格项之间，不会在容器边缘多出半倍间隙，也不需要写 :first-child 或负边距来修正。
- 旧版 Safari（iOS 16.4 以下、macOS Monterey）不支持
gap在 Grid 中生效，必须加-webkit-gap前缀 - 别在卡片上同时用
margin和gap，否则间距会叠加，尤其在 flex 降级场景下容易错乱 - 如果设计稿要求“首行无顶部 gap、末行无底部 gap”，说明这不是 Grid 的适用场景，该换 Flex +
flex-wrap
卡片高度不一致？先关掉这些“悄悄关闭 stretch”的设置
align-items: stretch 默认就启用，但很容易被以下操作意外禁用：
立即学习“前端免费学习笔记（深入）”；
- 卡片自身写了
height、min-height或max-height—— 改成min-height: 0再试 - 卡片内部用了
margin-top: auto，但父容器不是display: flex—— 这个声明在非 flex 容器里无效，还会干扰 Grid 高度计算 - Grid 容器外层有
max-height或overflow: hidden，切断了高度传递链 - 卡片里图片没加
object-fit: cover或aspect-ratio，加载抖动导致高度反复重排
IE11 或极老 Android WebView 怎么办
别强行 polyfill auto-fit，成本高且不可靠。更实际的做法是用 @supports 隔离：
/* 主流浏览器走 Grid */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)));
gap: 1.5rem;
}
<p>/<em> 老浏览器回退到基础流式布局 </em>/
@supports not (display: grid) {
.card-grid {
display: flex;
flex-wrap: wrap;
}
.card {
flex: 1 1 280px;
margin: 0 0.75rem 1.5rem 0;
}
}真正难搞的不是列数自适应，而是卡片内文字换行、图片比例、按钮对齐这些内容级细节——它们不会随 Grid 自动调整，得靠 aspect-ratio、line-clamp 和 flex 子项的 margin-top: auto 单独兜底。
