repeat(auto-fit, minmax(300px, 1fr))是唯一靠谱写法，因浏览器先按300px最小宽度尝试容纳列数，再由auto-fit合并空轨道，最后用1fr均分剩余空间；auto-fill会留白，1fr 1fr则不响应缩放。
grid-template-columns: repeat(auto-fill, minmax()) 怎么写才不翻车
直接抄 repeat(auto-fill, minmax(300px, 1fr)) 很容易在小屏上横向滚动或留白，关键不在函数名，而在两个参数的物理意义和容器上下文。
常见错误现象：iPhone SE 上卡片被压到 180px 宽、文字挤成一团；平板横屏时只显示两列、右边大片空白；加了 gap: 20px 后列数突然少一列。
-
minmax(300px, 1fr)中的300px不是“建议宽度”，而是浏览器分配轨道前的硬性下限——若容器宽度不足300px + gap× (列数 − 1)，就会放弃该列，改用更少列数 - 别用
minmax(300px, 300px)或minmax(300px, auto)：auto在这里无效，固定上限会卡死弹性，大屏留白严重 - 如果父容器没设
width或max-width，minmax()的“可用空间”会按视口算，导致意外缩列；稳妥做法是给网格容器加max-width: 1400px; margin: 0 auto;
auto-fill 和 auto-fit 到底该选哪个
选错不会报错，但视觉反馈天差地别：一个留白，一个拉伸。不是语法问题，是布局意图问题。
典型翻车场景：用 auto-fill 做卡片列表，结果小屏下出现三列、其中两列完全空白；用 auto-fit 做九宫格图标墙，结果 4 个图标就撑满整行，失去“格子感”。
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 做内容卡片（新闻、商品、文章）→ 优先
auto-fit：它收缩空轨道，让现有卡片均分剩余空间，避免空白列干扰阅读流 - 做图标/按钮/固定功能入口的九宫格 → 可用
auto-fill：保留所有可能轨道，维持视觉节奏和留白预期，哪怕内容不满也保持网格结构感 - 两者都不解决“最后一行对不齐”——这是
justify-content: stretch默认行为，如需左对齐，加justify-content: start
gap、box-sizing、图片三者不配齐，网格就等于没写
写了 repeat(auto-fit, minmax(280px, 1fr)) 却还是错位、撑破、换行异常？八成是这三处漏了协同。
真实项目里，90% 的“响应式失效”不是 Grid 写错了，而是配套没控住内容挤压空间。
- 必须给网格容器设
box-sizing: border-box：否则padding和gap叠加会吃掉列宽余量，尤其在嵌套布局中极易触发列数骤减 -
gap值别用百分比或em：旧版 Safari 对gap: 2%解析异常，重绘卡顿；统一用px或rem，手机端从12px起手 - 图片必须加
img { width: 100%; height: auto; }：不加的话原始尺寸顶开网格项高度，破坏行对齐；若需等比缩放，补aspect-ratio: 4/3（Safari 15.4+），旧版套div+overflow: hidden
移动端首屏错位、加载慢，真凶往往不是 Grid 本身
Grid 布局渲染极快，但实际卡顿多来自三类配套失误：阴影滥用、高度失控、容器截断。
检查点很具体，不是泛泛而谈“优化性能”：
- 别在卡片上用
box-shadow或filter: drop-shadow()：iOS 滚动时 GPU 加速失效，掉帧明显；改用border+background模拟浅阴影 - 卡片内容区（如
.card__body）要设max-height+overflow: hidden：否则长文本把整行拉高，浪费大量垂直空间，首屏可视区变小 - 确保网格容器没写死
height或min-height：Grid 行高由内容撑开，硬设高度会截断卡片，尤其在字体放大或动态加载图片后
真正麻烦的从来不是那行 repeat(auto-fit, minmax())，而是你忘了图片没约束、阴影没降级、容器高度被锁死——这些细节不处理，再“自动”的填充也会在真实设备上露馅。
