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

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

在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 类似，它只作用于列之间。

立即学习“前端免费学习笔记（深入）”；

Veed AI Voice Generator

Veed推出的AI语音生成器

77

查看详情

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

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

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

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

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

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

兼容性与注意事项

现代浏览器普遍支持 gap、row-gap 和 column-gap 在 Grid 布局中的使用。但需注意：

• 确保父容器设置了 display: grid 或 display: inline-grid
• 旧版本 Safari 可能需要测试兼容性，但目前主流已支持
• 不要与 flexbox 中的 gap 混淆，虽然语法类似，但这是 Grid 特有的特性

基本上就这些。用好 gap 系列属性，能让 Grid 布局更加整洁，减少 hack 式的 margin 调整。不复杂但容易忽略。

以上就是如何在CSS中使用Grid控制行间距_row-gap和column-gap设置间隔的详细内容，更多请关注php中文网其它相关文章！