使用CSS Grid的repeat(auto-fill, minmax(250px, 1fr))可实现动态卡片布局，配合gap和padding控制间距与留白，容器宽度变化时卡片自动换行并均分空间，无需媒体查询即可完成响应式设计。
使用CSS Grid实现动态卡片布局，关键在于灵活利用grid-template-columns配合repeat()、auto-fit或auto-fill，以及gap属性控制间距。这种方式能自动适应容器宽度，无需媒体查询即可实现响应式效果。
自动填充与最小宽度设置
通过repeat(auto-fill, minmax(250px, 1fr))可以定义每张卡片的最小宽度为250px，同时允许浏览器自动计算可容纳的列数。当容器变宽时，卡片会自动扩展以填满空间；容器变窄时则换行排列。
说明：
- auto-fill：尽可能多地填充列，即使某些列为空也会预留位置
- minmax(250px, 1fr)：每列最小250px，最大为等分剩余空间（1fr）
- 结合使用可在不同屏幕下保持合理布局
控制卡片间间距
使用gap属性统一设置行和列之间的间距，避免使用margin带来的对齐问题。例如设置gap: 16px;会在每个卡片之间创建16像素的间隔。
立即学习“前端免费学习笔记（深入）”；
建议做法：
- 在grid容器上直接设置
gap，更简洁且易于维护 - 可分别设置
row-gap和column-gap实现不同方向的间距控制 - 配合padding使用，确保内容区与容器边缘也有适当留白
完整示例代码
以下是可直接运行的HTML与CSS代码：
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 16px;
padding: 16px;
width: 100%;
}
<p>.card {
background: #f0f0f0;
border-radius: 8px;
height: 180px;
display: flex;
align-items: center;
justify-content: center;
font-family: Arial, sans-serif;
}</p>HTML结构：
<div class="container"> <div class="card">卡片1</div> <div class="card">卡片2</div> <div class="card">卡片3</div> <!-- 更多卡片 --> </div>
基本上就这些。这种布局方式简洁高效，适合图库、产品列表或信息卡片展示场景，无需JavaScript或复杂断点控制就能实现流畅的自适应效果。
