做响应式卡片列表时，最传统的写法是写一堆媒体查询：屏幕大于1200px显示四列，小于1200px变三列，再小变两列，手机上一列。断点一多代码就膨胀，而且列宽是写死的，中间尺寸的屏幕经常出现卡片宽得离谱或者挤成一团的情况。其实用CSS Grid的auto-fill配合minmax()，可以让浏览器自己计算每行能放下几张卡片，列数随容器宽度无缝变化，媒体查询只在少数特殊场景下补充使用。下面详细介绍这套方案的原理和落地细节。
一、核心思路：auto-fill加minmax让列数自动变化
先看最核心的一行代码：grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))。这行代码的含义是：网格的列由repeat自动生成，每一列的最小宽度是250px，最大是1fr（即平分剩余空间）。auto-fill的作用是让浏览器尽可能多地创建列，只要容器还能塞下一张250px的卡片，就会自动加一列。
举个具体例子，假设容器宽度是1100px，卡片间距是20px。浏览器会计算：放四列需要250乘以4加上三段间距共60px，合计1060px，放得下，于是生成四列；每列实际宽度是(1100-60)除以4等于260px。如果容器缩到800px，四列放不下了，自动变成三列，每列约253px。整个过程没有任何媒体查询参与，列数切换是连续平滑的。
下面是一个完整的示例，可以直接复制到本地测试：
.card-list {
display: grid;
/* 核心代码：自动填充列，每列最小250px，最大平分剩余空间 */
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
padding: 20px;
}
.card {
background: #fff;
border: 1px solid #e5e5e5;
border-radius: 8px;
padding: 16px;
/* 防止卡片内容过长撑破布局 */
min-width: 0;
overflow: hidden;
}
这里有个容易被忽略的细节：minmax(250px, 1fr)里的250px并不是卡片的最终宽度，而是下限。如果容器很宽、列数固定后仍有剩余空间，每列会被拉伸到超过250px。而1fr保证了所有列宽度一致，卡片之间不会出现有的宽有的窄的参差感。另外给卡片加上min-width: 0很关键，因为网格子项的默认min-width是auto，内容里的长单词或长链接会导致列被撑破。
二、auto-fill和auto-fit的区别：一字之差效果完全不同
repeat()的第一个参数除了auto-fill还可以写auto-fit，两者在卡片数量多的时候表现一致，但在卡片数量少的时候差别很大，这是面试和实际开发中高频踩坑点。
假设容器宽1200px，能生成四列，但页面上只有两张卡片。用auto-fill时，浏览器依然会创建四个列轨道，空着的两列位置保留，两张卡片各占一列，靠左排列，右边留出大片空白。用auto-fit时，空列会被折叠为零宽度，剩余空间重新分配给有卡片的列，于是两张卡片会被拉伸，各占600px宽。
/* 卡片多时两者一样，卡片少时表现不同 */
.list-fill {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
}
.list-fit {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
怎么选？如果你的卡片是动态数据，比如商品列表、文章流，数据通常很多，两种写法效果差不多，用auto-fill更保险。如果是后台仪表盘的小部件、只展示两三个数据卡的场景，auto-fit能让卡片撑满容器，视觉上更饱满。简单记法：fill是占位保留，fit是收缩拉伸。
三、媒体查询的补充作用：处理极端场景
虽然auto-fill方案已经覆盖了大部分情况，但媒体查询并非完全没用，它主要处理三类场景。
第一类是控制最小列宽。手机屏幕320px宽时，250px的卡片加内边距可能显得很局促，这时可以在小屏下把minmax的值调小：
.card-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 24px;
}
@media (max-width: 480px) {
.card-list {
/* 小屏幕单列展示，间距缩小 */
grid-template-columns: 1fr;
gap: 16px;
}
}
第二类是限制最大内容宽度。卡片列表在大屏上不宜无限拉宽，通常配合max-width和margin: 0 auto让列表居中，这个不需要媒体查询也能做到。第三类是改变卡片内部布局，比如大屏卡片横向排列图文、小屏改为上下堆叠，这种结构级的变化还是要交给媒体查询：
<div class="card-list">
<article class="card">
<img src="cover.jpg" alt="封面" class="card-cover"/>
<div class="card-body">
<h3>卡片标题</h3>
<p>卡片描述文字，介绍卡片的主要内容。</p>
</div>
</article>
<!-- 更多卡片 -->
</div>
<style>
.card-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 24px;
max-width: 1200px;
margin: 0 auto;
padding: 24px;
}
.card {
background: #fff;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0,0,0,.08);
overflow: hidden;
}
.card-cover {
width: 100%;
height: 180px;
object-fit: cover;
display: block;
}
.card-body { padding: 16px; }
@media (max-width: 480px) {
.card-list { grid-template-columns: 1fr; }
}
</style>
可以看到，媒体查询的职责从“控制列数”降级为“微调细节”，代码量比纯媒体查询方案少了三分之二以上，而且中间尺寸屏幕的表现更好，不会出现传统方案中列数跳变导致的卡片宽度突变。
四、方案对比与兼容性说明
再从整体上对比三种常见方案。纯媒体查询加百分比宽度的老方案，配合float或inline-block，兼容性最好但代码繁琐，间距计算麻烦。Flexbox方案用flex-wrap: wrap加固定宽度也能换行，但最后一行的卡片不会拉伸对齐，右侧经常出现参差不齐的空白。Grid的auto-fill方案则同时解决了列数自适应和等宽对齐两个问题，是目前最优雅的解法。
兼容性方面，grid-template-columns的auto-fill和minmax在Chrome、Firefox、Safari、Edge的主流版本中都已支持多年，可以放心在生产环境使用。唯一要注意的是IE11只支持旧版Grid语法且不支持auto-fill，如果项目还需要兼容IE11，只能退回媒体查询方案。好在现在绝大多数项目已经不需要考虑IE了。
最后总结一个实践建议：先把minmax的最小值定为你认为卡片可接受的最小宽度（一般240px到300px之间），再根据实际效果微调；卡片数量少且希望撑满时换用auto-fit；只在单列场景和卡片内部结构变化时才写媒体查询。这样写出来的卡片列表代码简洁、扩展性强，后续新增断点需求时改动成本也最低。