用 CSS Grid 做一个响应式卡片墙：从 auto-fit 到 minmax 的学习笔记
【摘要】 本文是一篇原创学习笔记：用 CSS Grid 的 auto-fit 与 minmax 写一个不用媒体查询也能自适应列数的卡片墙，并记录常见坑与调试方法。
目标：做一个卡片墙，容器变宽时列数自动变多，变窄时自动变少，不写一堆媒体查询。
核心代码只有三行思路：display: grid；grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))；gap: 16px。auto-fit 会把空轨道折叠掉，minmax 则保证每列最窄 240px、最宽平分剩余空间。
三个容易踩的坑：第一，卡片内容过长会把列撑开，记得给卡片设 min-width: 0 并处理溢出；第二，图片不设宽高比会让行高跳动，用 aspect-ratio 固定比例；第三，最后一行不足一排时，auto-fit 不会像 auto-fill 那样留空轨道，视觉上更自然。
调试方法：先在浏览器里拖动窗口看列数变化，再用网格检查器看轨道线；如果列数不动，先检查容器是否被父级固定宽度限制，而不是怀疑 Grid 本身。
小结：auto-fit 加 minmax 适合内容数量不确定的卡片墙；如果要固定列数或留白占位，再考虑 auto-fill 或媒体查询。
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）