使用 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) 可实现卡片平均、响应式排列，浏览器自动计算每行列数并保持宽度一致；auto-fill 预留空列，minmax 定义弹性范围，配合 grid-gap 和语义化结构即可高效布局。
用 grid-template-columns: repeat(auto-fill, minmax()) 是实现卡片平均、响应式排列最简洁高效的方式。核心在于让浏览器自动计算每行能放几个卡片，并保持宽度一致、不留空隙。
理解 auto-fill 和 minmax() 的配合逻辑
auto-fill 告诉 Grid 尽可能多地重复列轨道，即使没有足够内容也会预留空间；minmax(min, max) 定义每列的弹性范围：最小不小于 min（如 250px），最大不超过 max（如 1fr），超出时自动换行。
- 写法示例：
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) - 容器宽度变化时，列数会自动增减，每张卡片宽度在 280px 到“均分剩余空间”之间自适应
- 注意不是
auto-fit——auto-fill保留空列，更适合卡片布局（避免卡片被意外拉宽）
基础 HTML + CSS 实现卡片网格
只需给容器设 display: grid 和上述列定义，卡片本身无需额外设置宽度。
- 容器样式示例：
- 卡片保持语义化结构，不用 float 或 inline-block
- 搭配
grid-gap控制间距，比 margin 更可靠（无外边距合并问题）
.card-grid {
display: grid;
grid-gap: 16px;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
适配不同屏幕的微调技巧
单靠 minmax() 已具备响应能力，但可叠加媒体查询做更精细控制。
- 小屏（手机）：强制单列
grid-template-columns: 1fr - 中屏（平板）：
repeat(auto-fill, minmax(320px, 1fr)) - 大屏：增加 gap 或限制最大宽度防止卡片过宽，例如加
max-width: 1200px并居中
常见问题与避坑提醒
实际使用中几个容易忽略的点：
- 父容器必须有明确宽度（如 100%）或受限制，否则
auto-fill可能失效 - 卡片内图片建议用
img { width: 100%; height: auto; }防止溢出 - 若卡片高度不一，可用
align-items: start避免底部错位 - 不要给卡片设固定 width，会破坏 minmax 的弹性逻辑
基本上就这些。用好 repeat(auto-fill, minmax()) 后，卡片布局不再需要 JS 计算列数，也不依赖断点硬编码，真正实现“写一次，随处适配”。
