卡片网格布局几乎是现在所有内容型页面的标配：商品列表、文章流、相册展示、后台数据面板，到处都是它的身影。早期的实现大多依赖float或者inline-block，代码繁琐还容易出问题；后来Flex布局流行起来，情况改善了不少，但Flex本质上是一维布局，做行列同时存在的网格时还是需要一些技巧。直到Grid布局出现，二维网格才真正变得简单直接。这篇文章就用实际的代码例子，讲清楚如何用Grid快速搭建一个可控、可响应、间距统一的卡片网格。
Grid布局做卡片网格的基本结构
先从一个最基础的需求说起：页面中间区域要展示一组卡片，一行固定显示3个，卡片之间的间距是20像素。用Grid实现的话，HTML结构非常干净，只需要一个容器和若干个卡片元素，不需要任何额外的包装层。
<div class="card-grid">
<div class="card">
<h3>卡片标题一</h3>
<p>这里是卡片描述内容，可以放任意文字。</p>
</div>
<div class="card">
<h3>卡片标题二</h3>
<p>这里是另一段描述文字。</p>
</div>
<div class="card">
<h3>卡片标题三</h3>
<p>第三张卡片的介绍。</p>
</div>
</div>CSS部分只需要在容器上声明display:grid，再通过grid-template-columns定义列的结构即可：
.card-grid {
display: grid;
/* 定义三列，每列占可用空间的三分之一 */
grid-template-columns: repeat(3, 1fr);
gap: 20px;
max-width: 960px;
margin: 0 auto;
}
.card {
background: #fff;
border: 1px solid #e5e5e5;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}这段代码里有两个关键点值得展开。第一个是repeat(3, 1fr)，它等价于写三遍1fr，意思是把容器宽度平均分成三份，每列占一份。fr是fraction（份数）的单位，比写死像素宽度灵活得多，容器变大变小列宽会自动跟着变。第二个是gap: 20px，这个属性同时控制行间距和列间距，再也不需要像老方案那样给每个卡片加margin再处理首尾元素多余间距的问题，一行代码就解决了。
如果希望行间距和列间距不一样，比如行距24像素、列距16像素，可以把gap写成两个值：gap: 24px 16px，第一个值是行间距，第二个值是列间距。也可以用row-gap和column-gap分别设置，效果完全一致，看个人习惯选择即可。
响应式网格：让列数随屏幕宽度自动变化
固定三列在桌面端没问题，但手机屏幕那么窄，三列卡片挤在一起根本没法看。传统做法是写媒体查询，在不同断点下改grid-template-columns的值，比如大屏四列、平板两列、手机一列。这种写法直观，但断点一多代码就很啰嗦。Grid提供了一个更优雅的方案，就是下面要介绍的minmax加auto-fill组合。
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 20px;
}这行代码的含义是：每一列的最小宽度是240像素，最大不超过1fr。当容器宽度足够时，会尽可能多地塞下240像素宽的列；空间不够时，列数自动减少。于是同一份CSS在宽屏上可能显示四列，在窄屏上自动降到两列甚至一列，全程不需要写任何媒体查询。这种写法在很多开源组件库里被广泛采用，是响应式卡片网格最简洁的实现方式。
这里需要区分两个容易混淆的关键字：auto-fill和auto-fit。两者的差别在容器比内容宽的时候才体现出来。auto-fill会生成尽可能多的空轨道来占位，即使这些轨道里没有卡片；auto-fit则会把空的轨道折叠掉，让现有的卡片拉伸铺满整行。举个例子，容器里只有两张卡片且剩余空间很大，用auto-fit时这两张卡片会被拉得很宽撑满容器，而auto-fill时它们保持正常宽度，右侧留白。做卡片列表时多数场景更适合auto-fill，因为拉伸过宽的卡片阅读体验并不好；但如果只有少量卡片且希望它们铺满容器，auto-fit更合适。
还有一个细节值得注意：minmax的最小值不要太小。如果写成minmax(120px, 1fr)，在中等宽度屏幕上可能出现四五列的情况，每列窄得连标题都放不下。一般来说，内容型卡片的最小宽度设在220到280像素之间比较稳妥，具体可以根据卡片内容的密度调整。
等高卡片与内部排版细节
卡片网格有一个经典痛点：卡片内容长短不一，有的卡片三行文字，有的只有一行，默认情况下每张卡片高度只由自己的内容决定，视觉上一排卡片高低错落非常难看。Grid布局对此有天然的优势，因为网格中的项目默认会拉伸填满所在行的整个高度，也就是align-items: stretch是默认值。这意味着同一行的卡片自动等高，高度由内容最多的那张决定，其他卡片会自动拉伸到相同高度。
不过等高之后又带来一个新问题：内容少的卡片底部会留出一大块空白，如果卡片底部有按钮或价格等信息，它们的位置会高低不齐。解决办法是在卡片内部也用一次Grid，让内容区和底部区域分区排版：
.card {
display: grid;
/* 两行：内容区自动占据剩余空间，底部固定内容 */
grid-template-rows: 1fr auto;
gap: 16px;
background: #fff;
border: 1px solid #e5e5e5;
border-radius: 8px;
padding: 20px;
}
.card-footer {
align-self: end; /* 底部内容对齐到卡片底部 */
}
.card-footer .btn {
width: 100%;
padding: 8px 0;
background: #4a90d9;
color: #fff;
border: none;
border-radius: 6px;
cursor: pointer;
}这样处理后，无论卡片正文是三行还是十行，按钮永远贴在卡片底部，整排卡片的视觉基线保持一致，看起来专业得多。这个技巧在电商商品卡、价格表、功能介绍卡里都非常实用。
顺带说一下图片类卡片。如果卡片顶部要放图片且希望不同比例的图片统一裁切，可以让图片区域占满卡片宽度并固定纵横比：
.card-image {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: 8px 8px 0 0;
}aspect-ratio属性统一了图片区域的宽高比，object-fit: cover则保证图片按比例裁切填满区域，不会变形也不会留白，图文卡片最常见的需求就解决了。
Grid与Flex做网格的取舍
不少人在做卡片布局时会纠结到底用Grid还是Flex。两者的核心区别在于维度：Flex是一维布局，擅长处理一条线上的排列；Grid是二维布局，行和列同时可控。做卡片网格这种明显的二维结构，Grid几乎是更好的选择，理由有三点。
第一，等高不需要任何额外代码。Flex方案里如果允许换行，每行的高度是独立的，想跨行等高必须给卡片设置固定高度或者用别的方式模拟，而Grid同一行自动等高。第二，间距控制更直接。Flex布局中用gap虽然也能实现间距，但早期的margin负值方案还残留不少，维护成本高；Grid的gap语义清晰且浏览器支持完善。第三，网格线能力。Grid可以精确控制某张卡片跨几列几行，比如让第一张卡片作为主打内容跨两列，这在纯Flex方案里实现起来相当别扭。
/* 第一张卡片跨两列，作为重点展示 */
.card:first-child {
grid-column: span 2;
}
/* 需要兼容性兜底时，Flex方案仍可作为降级 */
.fallback-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.fallback-grid .card {
flex: 0 0 calc((100% - 40px) / 3); /* 三列，扣除两处间距 */
}当然Flex并非不能做网格，上面这个calc的写法在老项目里很常见，也能工作。但对比之下Grid的repeat(3, 1fr)明显更简洁，语义也更清楚。现代浏览器的Grid支持已经非常完善，除非要照顾特别老的环境，否则新项目里做卡片网格首选Grid。
总结一下：用display: grid加grid-template-columns定义网格骨架，用repeat配合minmax和auto-fill实现免媒体查询的响应式列数，用gap统一控制行列间距，再利用Grid默认的拉伸特性加上卡片内部的二次Grid排版，就能搭出一套在任意屏幕宽度下都整齐稳定的卡片网格布局。把这些模式记住，以后遇到各种卡片需求基本都能快速应对。