CSS Grid 间距

Begindev 编辑部 March 25, 2026

grid-gap 是 CSS Grid 中一个基础且重要的属性，用于控制网格项目（grid items）之间的间距。它提供了一种简单高效的方法，在网格布局的行和列之间创建“沟槽”（gutters），从而增强内容的可读性和视觉吸引力。

本章将全面探讨 grid-gap 的各个方面，为你提供在项目中有效实现它的知识和技能。

1. 理解 `grid-gap`、`row-gap` 和 `column-gap`

grid-gap 属性是 grid-row-gap 和 grid-column-gap 的简写属性。它指定了网格行和列之间沟槽（间距）的大小。简单来说，就是你在网格容器内看到的每个项目之间的空白区域。

grid-gap (简写): 在一个声明中同时指定 grid-row-gap 和 grid-column-gap。如果只提供一个值，它将同时应用于行间距和列间距。如果提供两个值，第一个值代表行间距 (row gap)，第二个值代表列间距 (column gap)。
row-gap: 指定网格容器中行与行之间的间距大小。此属性控制网格项目的垂直间距。
column-gap: 指定网格容器中列与列之间的间距大小。此属性控制网格项目的水平间距。

这些属性的值可以是任何有效的 CSS 长度单位（如 px, em, rem, vw, vh），百分比，或者关键字 normal。normal 关键字相当于将间距设置为零。

注意：在现代 CSS 中，grid-gap、grid-row-gap 和 grid-column-gap 已逐渐被更通用的 gap、row-gap 和 column-gap 取代，后者也适用于 Flexbox。但在 Grid 上下文中，它们的作用是一样的。

2. 基础示例

让我们通过一些简单的例子来说明这些属性是如何工作的。假设我们有一个包含三行三列的网格容器。

2.1 示例 1：使用单个值的 `grid-gap`

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 150px);
  grid-gap: 20px; /* 对行和列都应用 20px 的间距 */
}

在这种情况下，网格中的每一行和每一列之间都会有 20px 的间隙。

2.2 示例 2：使用两个值的 `grid-gap`

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 150px);
  grid-gap: 10px 30px; /* 10px 行间距, 30px 列间距 */
}

这里，行间距被设置为 10px，列间距被设置为 30px。这提供了不同的水平和垂直间距。

2.3 示例 3：分别使用 `row-gap` 和 `column-gap`

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 150px);
  row-gap: 15px;
  column-gap: 25px;
}

这实现了与示例 2 相同的结果，但是使用了普通属性（longhand properties）。行间距是 15px，列间距是 25px。

2.4 示例 4：使用不同的单位

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, auto);
  row-gap: 1em;
  column-gap: 2vw;
}

这演示了使用不同单位的灵活性。row-gap 使用了 em，它是相对于元素字体大小的；而 column-gap 使用了 vw，它是相对于视口宽度的。

3. 值的详细解释

长度单位 (px, em, rem, vw, vh 等): 这些指定了间距的固定大小。px 提供最精确的控制，而 em 和 rem 提供基于字体大小的灵活性。vw 和 vh 创建相对于视口大小的间距，这对于响应式布局非常有用。
百分比 (%): 间距大小计算为网格容器大小的百分比。使用百分比时要小心，因为随着容器大小的变化，间距大小也会随之改变。
normal: 间距大小默认为零。

4. 何时使用 `grid-gap`, `row-gap` 和 `column-gap`

当你想让行和列拥有相同的间距大小，或者想在一行代码中同时设置两个间距时，使用 grid-gap。
当你需要为行和列设置不同的间距大小时，分别使用 row-gap 和 column-gap。这提供了更精细的控制。

5. 实战案例与演示

让我们探索一些实际例子来演示 grid-gap 的用法。

5.1 案例 1：创建画廊布局 (Gallery Layout)

想象一下，你正在为一个摄影网站创建画廊布局。你想在一个网格中展示一系列图片，并且图片之间要有间距以保证视觉清晰度。

<div class="gallery">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
  <img src="image4.jpg" alt="Image 4">
  <img src="image5.jpg" alt="Image 5">
  <img src="image6.jpg" alt="Image 6">
</div>

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 15px;
}
.gallery img {
  width: 100%;
  height: auto;
  object-fit: cover; /* 防止图片变形 */
}

在这个例子中，grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) 创建了一个响应式网格，其中每列至少 200px 宽，并会扩展以填充可用空间。grid-gap: 15px 在图片之间添加了 15px 的间距，使画廊看起来更整洁有序。object-fit: cover 确保图片保持其宽高比并填充网格单元格而不变形。

5.2 案例 2：构建产品列表 (Product Listing)

考虑一个以网格格式展示产品的电商网站。产品之间的间距对于呈现清晰且吸引人的界面至关重要。

<div class="product-listing">
  <div class="product">
    <img src="product1.jpg" alt="Product 1">
    <h3>产品名称 1</h3>
    <p>产品 1 的描述。</p>
  </div>
  <div class="product">
    <img src="product2.jpg" alt="Product 2">
    <h3>产品名称 2</h3>
    <p>产品 2 的描述。</p>
  </div>
  <div class="product">
    <img src="product3.jpg" alt="Product 3">
    <h3>产品名称 3</h3>
    <p>产品 3 的描述。</p>
  </div>
</div>

.product-listing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}
.product {
  border: 1px solid #ccc;
  padding: 10px;
}
.product img {
  width: 100%;
  height: auto;
}

这里，grid-template-columns: repeat(3, 1fr) 创建了三个等宽的列。grid-gap: 20px 在产品项目之间提供了 20px 的间距，改善了视觉分隔，使布局更易读。.product 类上的 border 和 padding 进一步增强了视觉结构。

5.3 案例 3：创建表单布局 (Form Layout)

CSS Grid 也可以用来创建复杂的表单布局。表单元素之间一致的间距可以提高可用性。

<form class="form-grid">
  <label for="name">姓名:</label>
  <input type="text" id="name" name="name">
  <label for="email">邮箱:</label>
  <input type="email" id="email" name="email">
  <label for="message">留言:</label>
  <textarea id="message" name="message"></textarea>
  <button type="submit">提交</button>
</form>

.form-grid {
  display: grid;
  grid-template-columns: 1fr 2fr; /* 根据需要调整列宽 */
  row-gap: 10px;
  column-gap: 20px;
}
.form-grid label {
  text-align: right;
}
.form-grid input,
.form-grid textarea {
  width: 100%;
  padding: 5px;
}
.form-grid button {
  grid-column: span 2; /* 让按钮跨越两列 */
}

在这个例子中，grid-template-columns: 1fr 2fr 创建了两列，第二列的宽度是第一列的两倍。row-gap: 10px 和 column-gap: 20px 分别在垂直和水平方向上为表单元素提供了间距。按钮上的 grid-column: span 2 使其横跨两列。

1. 理解 grid-gap、row-gap 和 column-gap