minmax(240px, 1fr) 是响应式网格起点，因240px为iPhone SE安全底线，1fr确保满足最小宽的列均分剩余空间；auto-fit收缩空列，更适合卡片布局；需viewport和border-box保障生效。
直接用 minmax() 配合 repeat() + auto-fit 就能实现真正可用的响应式网格，而不是靠一堆媒体查询硬切列数。
为什么 minmax(240px, 1fr) 是响应式网格的起点
这个组合不是“看起来高级”，而是解决了一个具体问题：列宽不能无限压缩。240px 是 iPhone SE 屏宽减去左右边距后的安全底线，低于它，文字、按钮、图片就会挤成一团或触发横向滚动。1fr 不是“填满剩余空间”的模糊说法，而是让所有满足最小宽度的列均分容器剩余宽度——浏览器会自动算出该显示几列，你不用管。
- 写
minmax(300px, 1fr)在手机上会崩，因为 300px × 2 > 375px，浏览器只能强行压缩或溢出 -
minmax(240px, 1fr)在 375px 宽屏上只出 1 列，在 768px 上自然出 2 列，在 1200px 上大概率出 4–5 列 - 别用
minmax(240px, 2fr)——最大值设成 2fr 没意义，它不会让某列比别的宽一倍，反而干扰均分逻辑
auto-fit 和 auto-fill 的实际差别在哪
差别就在“空列是否占位”。auto-fill 会按最小宽度尽可能多地生成列槽（哪怕内容为空），auto-fit 则会把空列收缩掉，把空间让给有内容的列。响应式卡片布局几乎总是该选 auto-fit。
- 用
auto-fill：容器宽 800px，minmax(240px, 1fr)→ 强行塞 3 个 240px 槽，剩 80px 空隙，第三列空着但占位 - 用
auto-fit：同样 800px → 先生成 3 槽，发现第三列无内容，就收缩掉，剩下 2 列均分全部 800px，每列 400px - Safari 15.4 之前不支持
gap在inline-grid上生效，所以容器必须是display: grid，否则auto-fit行为可能异常
卡片内元素怎么不破坏 minmax() 的计算
网格项（grid item）的高度失控，是 minmax() “失效”的最常见假象。其实 grid 没错，是卡片自己没锚定基线。
立即学习“前端免费学习笔记（深入）”；
-
<img>必须加width: 100%; height: auto;，否则原始尺寸会撑开网格项高度 - 卡片容器设
min-height: 160px（或根据内容定），避免文字少时高度塌缩，导致 hover 放大后下方内容跳动 - 禁止在卡片里用
margin-top推动子元素位置——改用padding或align-self，否则 margin 会外溢影响网格行高计算 - hover 动画只用
transform和opacity，别碰height、width、margin，否则触发重排，整行重绘
什么时候才真需要媒体查询
基础 grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) 已覆盖 80% 场景。媒体查询只干三件事：列数突变、gap 缩减、卡片内堆叠顺序调整（比如手机端把标题放图片下面）。
- 平板（769–1024px）可设
grid-template-columns: repeat(2, 1fr)，强制两列，避免 3 列时中间列太窄 - 手机（≤ 768px）设
grid-template-columns: 1fr，单列，同时把gap从 24px 改成 12px - 别在
@media (max-width: 768px)里写display: block——那等于放弃 grid，回到浮动时代 - 如果用了
grid-auto-rows，hover 导致高度变化会直接影响后续行位置；此时应改用显式grid-template-rows，或干脆放弃动态行高
真正容易被忽略的点是：视口元标签和 box-sizing。没有 <meta name="viewport" content="width=device-width, initial-scale=1.0">，所有 grid 布局在移动端都只是纸面方案；没写 * { box-sizing: border-box; }，padding 和 border 会吃掉 minmax() 算出来的可用宽度，小屏下直接溢出。
