使用CSS Grid的repeat(auto-fit, minmax())结合gap实现响应式卡片布局，可自动调整列数适配屏幕。grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))确保每列最小250px、最大均分剩余空间，auto-fit使有内容的列拉伸填满容器，避免空白；gap设置间距，justify-items控制对齐，max-width限制容器宽度并居中。相比auto-fill，auto-fit更适用于卡片布局，能在项目少时自动扩展卡片宽度，提升视觉效果。该方法无需媒体查询，简洁高效，适合项目展示和商品列表等场景。
实现一个响应式的项目卡片网格布局，关键在于灵活使用 CSS Grid 的 grid-template-columns 配合 repeat()、auto-fit 与 auto-fill，再结合 minmax() 和 gap 属性。这样可以自动调整列数，适配不同屏幕尺寸，无需媒体查询。
基本 HTML 结构
每个项目卡片放在一个容器中，结构简洁清晰：
<div class="grid-container"> <div class="card"><h3>项目 1</h3></div> <div class="card"><h3>项目 2</h3></div> <div class="card"><h3>项目 3</h3></div> <!-- 更多卡片 --> </div>
使用 grid-template-columns + repeat + minmax
核心是定义一个自适应的列宽模式。使用 repeat(auto-fit, ...) 或 repeat(auto-fill, ...)，配合 minmax() 设置最小和最大列宽。
示例 CSS：
立即学习“前端免费学习笔记（深入）”；
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
padding: 20px;
}
.card {
background: #f4f4f4;
border-radius: 8px;
padding: 20px;
text-align: center;
}
说明：
- minmax(250px, 1fr)：每列最小 250px，最大为 1fr（均分剩余空间）
- auto-fit：将可用空间平均分配给所有“已填充”的列，末尾不留空列
- auto-fill：不管是否有内容，都会尽可能填满行的列数，可能留下空白项
- gap: 20px：设置卡片之间的间距，包括行和列方向
auto-fit 与 auto-fill 的区别
两者在视觉效果上常有差异，尤其在容器宽度较大或项目数量少时。
- 用 auto-fit：项目会拉伸以填满整个容器。例如只有 2 个卡片时，它们会变宽并占满整行
- 用 auto-fill：即使没有足够项目，也会保留潜在的列位置，可能导致右侧出现空白
一般推荐使用 auto-fit，更符合响应式卡片布局的需求。
控制对齐与响应行为
可进一步优化布局表现：
- 添加 justify-items: stretch（默认）让卡片填满列宽
- 使用 max-width 控制容器最大宽度，居中显示：
max-width: 1200px; margin: 0 auto; - 在小屏设备上，minmax(250px, 1fr) 会自动变为单列，无需额外设置
基本上就这些。掌握 repeat(auto-fit, minmax()) + gap，就能快速构建美观、自适应的卡片网格，适用于项目展示、商品列表等场景。不复杂但容易忽略细节，比如 gap 的兼容性和 minmax 的合理取值。
