使用 grid-auto-rows: auto 和 gap 可创建自适应图片卡片网格。1. 设置 display: grid，用 grid-template-columns 实现响应式列布局；2. grid-auto-rows: auto 使行高随内容变化，避免裁剪；3. gap: 16px 统一间距，消除传统 margin 问题；4. 卡片结构包含图片与文字，样式控制内容溢出；5. 该布局适用于作品集、商品页等场景，宽屏多列、窄屏少列，自动适配，维护简单。
使用CSS Grid制作图片卡片堆叠布局时，grid-auto-rows: auto 和 gap 是两个非常实用的属性。它们能帮助你创建灵活、自适应且间距均匀的卡片网格，尤其适合图片卡片这类内容高度不一的场景。
1. 基础Grid容器设置
首先定义一个Grid容器，并启用自动行生成。使用 grid-auto-rows: auto 让每一行的高度根据内容自动调整，这对图片卡片特别友好——尤其是当卡片内文字长度不同或图片尺寸略有差异时。
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-auto-rows: auto;
gap: 16px;
}
-
grid-template-columns 使用
auto-fit和minmax(250px, 1fr)实现响应式列数：容器会尽可能多地放入最小宽度为250px的列，多余空间平均分配。 - grid-auto-rows: auto 确保每行高度由内容决定，避免固定高度裁剪内容。
- gap: 16px 统一设置行与列之间的间距，让布局更清爽。
2. 卡片内容结构建议
每个卡片应包含图片和文字，结构保持一致：
立即学习“前端免费学习笔记（深入）”；
<div class="card-grid">
<div class="card">
<img src="image1.jpg" alt="描述">
<h3>标题</h3>
<p>简短说明文字</p>
</div>
<!-- 更多卡片 -->
</div>
为卡片添加基本样式，确保内容不会撑破布局：
.card {
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
background: white;
}
<p>.card img {
width: 100%;
height: auto;
display: block;
}</p><p>.card h3 {
margin: 12px;
font-size: 1.1em;
}</p><p>.card p {
margin: 0 12px 12px;
color: #666;
font-size: 0.9em;
}</p>3. gap的作用与视觉效果
gap 属性替代了传统的外边距负值或清除浮动等复杂方法。它在Grid项之间创建统一间距，且不会影响容器边缘或换行错位。
- 即使卡片高度不同，
gap也能保证垂直和水平间距一致。 - 与
margin相比，gap不会产生折叠或外溢问题，更适合栅格系统。 - 移动端下，列数减少，
gap依然保持良好视觉节奏。
4. 实际应用场景示例
这种布局适用于作品集、商品展示、博客文章列表等需要图文并茂且响应式的页面。
例如，在屏幕较宽时显示三列卡片，窄屏时变为两列甚至单列，每张卡片高度由自身内容决定，grid-auto-rows: auto 自动调整行高，gap 保持整洁间隔。
基本上就这些。合理利用 grid-auto-rows: auto 和 gap，可以快速构建美观、维护简单的图片卡片堆叠布局，无需媒体查询也能实现良好响应效果。
