使用css grid的auto-fit与minmax可实现响应式多列卡片布局，自动适配屏幕宽度。通过grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))定义每列最小250px、最大均分剩余空间，结合gap设置间距，无需媒体查询即可在大屏、平板、手机上分别显示4~5、2~3、1列，且gap避免了margin错位问题，是当前最简洁高效的方案。
在网页设计中，多列卡片布局非常常见，比如商品展示、作品集或文章列表。使用 CSS Grid 可以轻松实现响应式且自动填充的多列布局，并精确控制列与行之间的间距。
使用 Grid 实现自动填充多列布局
通过 grid-template-columns 结合 repeat() 和 auto-fit 或 auto-fill，可以让网格容器根据可用空间自动调整列数。
常用写法：- auto-fill：尽可能多地填充列，即使某些列为空。
- auto-fit：只创建有内容的列，并拉伸它们填满剩余空间。
- minmax() 设置每列最小和最大宽度，实现响应式效果。
示例代码：
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
这段代码表示：容器内创建多个列，每列最小 250px，最大为 1fr（均分剩余空间），并自动适配屏幕宽度。
立即学习“前端免费学习笔记（深入）”；
设置卡片之间的间距（gap）
使用 gap 属性可以统一设置行与列之间的间距，语法简洁，无需额外处理 margin 或 padding 导致的错位问题。
- gap: 20px 表示行列间距均为 20px。
- gap: 20px 10px 分别设置行间距和列间距（先行后列）。
结合上面的布局，完整样式如下：
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
padding: 20px;
}
.card {
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
overflow: hidden;
}
响应式表现说明
这种写法的优势在于无需媒体查询即可实现基本响应式：
- 大屏幕上显示 4~5 列。
- 平板上自动变为 2~3 列。
- 手机上变成单列堆叠。
因为 minmax 确保了最小宽度，当空间不足时会自动换行减少列数。
基本上就这些。用 Grid 的 auto-fit + minmax 是目前最简洁高效的多列卡片布局方案。不复杂但容易忽略细节，比如 gap 替代 margin 能避免浮动布局的老问题。
