auto-fit 比 auto-fill 更适合卡片列表，因其收缩空轨道使卡片均分剩余空间、撑满容器，而 auto-fill 保留空白轨道易致右侧留白或横向滚动；小屏下误用 auto-fill 会导致卡片过窄、文字拥挤。
直接用 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 就能实现真正自适应的卡片列表，不需要媒体查询、不用算列数、也不用 JS 控制宽度。
为什么 auto-fit 比 auto-fill 更适合卡片列表
auto-fit 会收缩空轨道，让剩余空间被已有卡片均分；auto-fill 则保留空白轨道占位，容易在右侧留白或触发横向滚动条。实际效果是：auto-fit 下卡片始终撑满容器宽度，auto-fill 下可能“看着像没铺满”。
- 误用
auto-fill后，小屏下卡片宽度异常窄、文字挤成一团，大概率就是这个原因 - 如果后续要支持拖拽插入新卡片，才考虑
auto-fill预留槽位 - 检查浏览器开发者工具的 computed styles，确认
grid-template-columns实际解析出的列数是否符合预期
卡片内部高度不一致怎么办
Grid 默认拉伸子项（align-items: stretch），但卡片内容长短不一会导致视觉错位。别给卡片设固定高，也别用 position: absolute 强行对齐底部。
- 给卡片容器加
display: flex+flex-direction: column+height: 100% - 主体区域（如描述文字）用
flex-grow: 1带出弹性空间 - 底部按钮用
margin-top: auto自动贴底 - 父级网格加
align-content: start防止行高塌陷，避免因最高卡片把整行撑高
gap 和 margin 别混着用
gap 是 Grid 原生间距控制，它不参与尺寸计算，也不会触发外边距合并；而卡片上若还写了 margin，就会和 gap 叠加，造成间距翻倍或对齐偏移。
- 统一用
gap管理行列间距，卡片自身去掉所有margin - 图片记得加
width: 100%+height: auto，否则可能撑破网格轨道 - 如果卡片有圆角或阴影，确保
overflow: hidden写在卡片根元素上，防止内容溢出裁切失效
父容器没宽度时 auto-fit 失效
auto-fit 的列数计算依赖父容器的可用行内宽度。如果父元素是 display: inline-grid、或者在 Flex 容器里没设 flex: 1 / width: 100%，那 Grid 就“算不出该放几列”。
- 检查父容器是否具有明确宽度（比如
max-width: 1400px+margin: 0 auto） - 移除卡片上的
width、min-width（除非必要），否则会干扰 Grid 的自动分配逻辑 - 在 Safari 或旧版 Chrome 中测试时，注意
gap支持从 iOS 14.5 开始稳定，降级方案需用margin+:not(:last-child)
最易被忽略的是卡片内部的 flex 布局与外部 grid 的配合——光靠 grid 解决列数，不处理卡片内部高度弹性，最终还是会出现底部错位、文字截断或悬停动效失真。动效必须用 transform，别碰 top 或 margin-top。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
