如何在CSS中使用Grid制作图片卡片堆叠_grid-auto-rows auto和gap结合-css教程-PHP中文网

如何在CSS中使用Grid制作图片卡片堆叠_grid-auto-rows auto和gap结合

P粉602998670

发布： 2025-11-28 20:47:02

原创

310人浏览过

使用 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结合

使用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>

登录后复制

为卡片添加基本样式，确保内容不会撑破布局：

Kits AI

Kits.ai 是一个为音乐家提供一站式AI音乐创作解决方案的网站，提供AI语音生成和免费AI语音训练

492

查看详情

.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>

登录后复制