在网页开发中，多行等宽卡片布局是非常常见的需求，比如商品列表、文章卡片展示等场景，都需要卡片宽度一致、行高随内容自动调整。使用CSS Grid布局可以高效实现这个效果，不需要复杂的计算或者浮动定位处理。
核心实现思路
CSS Grid的grid-template-columns属性可以定义每列的列宽，使用repeat()函数配合固定宽度值，就能实现多列等宽的效果。而行高默认会根据内容自动调整，不需要额外设置，刚好满足自动行高的需求。
关键属性说明
- grid-template-columns：定义网格的列轨道大小，使用
repeat(auto-fill, 固定宽度)可以在容器宽度足够时自动填充列，宽度不足时自动换行 - gap：设置网格之间的间距，包括行间距和列间距，避免手动计算margin的麻烦
- grid-auto-rows：定义自动生成的行轨道大小，默认是自动适配内容，也可以设置最小行高
完整实现代码示例
下面是一个完整的多行等宽卡片实现代码，卡片固定宽度为280px，列数根据容器宽度自动调整，行高随卡片内容自动变化：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多行等宽卡片Grid布局</title>
<style>
/* 卡片容器样式 */
.card-container {
display: grid;
/* 自动填充列，每列固定280px宽度，列之间间距20px */
grid-template-columns: repeat(auto-fill, 280px);
gap: 20px;
/* 让网格整体居中 */
justify-content: center;
padding: 20px;
background-color: #f5f5f5;
}
/* 单个卡片样式 */
.card {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
padding: 16px;
/* 卡片内容超出时自动换行 */
word-break: break-all;
}
.card-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
color: #333;
}
.card-content {
font-size: 14px;
color: #666;
line-height: 1.5;
}
.card-img {
width: 100%;
height: 160px;
object-fit: cover;
border-radius: 4px;
margin-bottom: 12px;
}
</style>
</head>
<body>
<div class="card-container">
<div class="card">
<img class="card-img" src="https://ipipp.com/demo-img1.jpg" alt="卡片图片">
<div class="card-title">卡片标题一</div>
<div class="card-content">这是第一张卡片的内容，内容长度适中，用来测试行高自动适配的效果。</div>
</div>
<div class="card">
<img class="card-img" src="https://ipipp.com/demo-img2.jpg" alt="卡片图片">
<div class="card-title">卡片标题二</div>
<div class="card-content">这是第二张卡片的内容，内容比较长，用来测试当卡片内容较多时，行高是否会随内容自动增加，不需要手动设置固定高度。</div>
</div>
<div class="card">
<img class="card-img" src="https://ipipp.com/demo-img3.jpg" alt="卡片图片">
<div class="card-title">卡片标题三</div>
<div class="card-content">短内容卡片。</div>
</div>
<div class="card">
<img class="card-img" src="https://ipipp.com/demo-img4.jpg" alt="卡片图片">
<div class="card-title">卡片标题四</div>
<div class="card-content">这是第四张卡片的内容，同样用来测试多行布局的效果，当容器宽度变化时，列数会自动调整，卡片始终保持固定宽度。</div>
</div>
</div>
</body>
</html>
响应式适配优化
如果需要适配移动端，只需要给容器添加最大宽度限制，或者调整固定列宽的大小即可。比如在小屏幕下将固定列宽改为90%，就能实现移动端卡片占满屏幕宽度的效果：
/* 移动端适配 */
@media (max-width: 768px) {
.card-container {
/* 小屏幕下每列宽度为容器宽度的90%，实现卡片占满宽度 */
grid-template-columns: repeat(auto-fill, 90%);
padding: 10px;
gap: 15px;
}
}
常见问题说明
如果卡片内容高度差异过大，想要设置最小行高，可以给容器添加grid-auto-rows属性：
.card-container {
/* 设置自动生成的行最小高度为200px，内容超出时自动增加 */
grid-auto-rows: minmax(200px, auto);
}
这种实现方式兼容性较好，现代浏览器都支持Grid布局，不需要处理复杂的浮动或者flex布局的换行计算问题，开发效率更高。