如何在CSS中使用Grid控制行间距_row-gap和column-gap设置间隔

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

如何在CSS中使用Grid控制行间距_row-gap和column-gap设置间隔

2025-11-27

浏览次数：次

返回列表

CSS Grid中的gap属性可简洁设置行列间距。row-gap定义行间垂直间距，如三行产生两个20px间隙；column-gap设置列间水平间距，三列间有15px间隔；gap为简写，单值时行列同距，双值则分别指定row-gap和column-gap，现代浏览器广泛支持，需确保容器设为display: grid，避免与Flexbox混淆。

如何在css中使用grid控制行间距_row-gap和column-gap设置间隔

在CSS Grid布局中，可以通过 row-gap、column-gap 和简写的 gap 属性来控制网格行与列之间的间距。这些属性让布局更清晰、更易维护，无需依赖 margin 或 padding 来制造空白。

row-gap：设置行与行之间的间距

row-gap 用于定义网格容器中行与行之间的垂直间距。它作用于每一行之间，不会在容器的顶部或底部额外添加空白。

例如：

.container {
  display: grid;
  grid-template-rows: 100px 100px 100px;
  row-gap: 20px;
}

这个例子中，三行网格之间会有 20px 的垂直间隔，共产生两个间隙（第一与第二行之间，第二与第三行之间）。

column-gap：设置列与列之间的间距

column-gap 用于定义网格中列与列之间的水平间距。和 row-gap 类似，它只作用于列之间。

例如：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 15px;
}

三列之间会各保持 15px 的水平间隔，共两个间隙出现在三列之间。

语鲸

AI智能阅读辅助工具

314 查看详情

gap：row-gap 与 column-gap 的简写形式

gap 是 row-gap 和 column-gap 的简写属性，可以同时设置行列间距，语法如下：

一个值：表示行和列使用相同的间距
两个值：第一个是 row-gap，第二个是 column-gap

示例：

.container {
  display: grid;
  gap: 20px;           /* 行和列都是 20px */
}
&lt;p>.container {
gap: 20px 10px;      /<em> row-gap: 20px, column-gap: 10px </em>/
}