auto-fit比auto-fill更适合卡片列表，因其收缩空轨道使剩余列均分空间，避免小屏下卡片过窄、换行难看或出现空白列；配合minmax(300px, 1fr)可自然单列切换，再通过align-self: start、gap及图片约束等细节优化，方得真正可用的响应式网格。
直接用 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) 就能实现真正可用的响应式卡片网格，不用写媒体查询，也不靠 JS 计算列数。
为什么 auto-fit 比 auto-fill 更适合卡片列表
auto-fit 会把空的轨道收缩掉，让剩余列均分空间；auto-fill 则保留所有生成的轨道，哪怕没内容也会占位——这会导致小屏下卡片被强行压窄、文字换行难看，甚至出现空白列。
- 卡片数量少于列数时，
auto-fit自动合并剩余空间，保持卡片宽度不塌缩 - 容器宽度变化时，
auto-fit触发重排更及时，视觉反馈更自然 - 配合
minmax(300px, 1fr)，300px 是最小可读宽度，低于这个值就自动切为单列
卡片高度不一致时错位怎么 fix
Grid 默认会让所有项目在行内拉伸对齐（align-items: stretch），导致短内容卡片被拉高、底部悬空。这不是 bug，是 Grid 的默认行为。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 给卡片加
align-self: start，让它顶部对齐、不拉伸 - 不要用
margin-bottom控制卡片间距——会干扰 Grid 的轨道计算，改用gap - 如果卡片内有图片，记得设
img { width: 100%; height: auto; }，避免撑破容器
移动端首屏加载慢？检查这三个地方
Grid 布局本身不拖慢渲染，但实际项目中卡顿往往来自配套设置：
-
gap值别设成百分比或 em，只用 px/rem，否则某些旧版 Safari 会重绘异常 - 别在卡片上滥用
box-shadow或filter: drop-shadow()，尤其在 iOS 上滚动易掉帧 - 确保父容器没写死
height或min-height，否则 Grid 行高可能被截断
真正麻烦的不是写对那行 repeat(auto-fit, minmax(...))，而是后续卡片内容高度不可控、图片未约束、阴影未降级——这些细节不处理，再“响应式”的布局也会在真实设备上露馅。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
