CSSgrid-gap属性使用教程

有志者，事竟成！如果你在学习文章，那么本文《CSS grid-gap设置方法详解》，就很适合你！文章讲解的知识点主要包括，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

grid-gap用于设置CSS网格布局中行与列的间距，可简写为一个或两个值，分别表示行列间距，也可用row-gap和column-gap单独设置，现代推荐使用gap属性替代，支持px、em、rem、%等单位，有助于提升布局清晰度与响应式设计。

在 CSS Grid 布局中，grid-gap 用于设置网格行与列之间的间距。它是一个简写属性，可以同时设置行间距（row gap）和列间距（column gap），也可以分别使用 row-gap 和 column-gap 单独控制。

基本语法

grid-gap 接受一个或两个长度值：

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

示例：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 200px;
  grid-gap: 10px; /* 行和列都间隔 10px */
}

如果想让行间距为 20px，列间距为 10px：

.container {
  grid-gap: 20px 10px;
}

单独设置行或列间距

你也可以只调整其中一种间距，使用更现代的独立属性：

• row-gap：设置行之间的间距
• column-gap：设置列之间的间距

示例：

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

这等同于：

grid-gap: 15px 20px;

支持的单位

grid-gap 支持多种长度单位：

• px：固定像素值
• em / rem：相对字体大小
• %：相对于容器尺寸的百分比
• fr：不推荐用于 gap，gap 不参与弹性分配

小技巧：

使用 rem 可以实现响应式间距，配合媒体查询更容易控制不同设备下的布局呼吸感。

注意事项

• grid-gap 不会影响网格容器的外边距，只作用于网格项目之间
• 旧版浏览器可能需要使用 gap 替代（现代标准已统一）
• 目前主流浏览器已支持 gap 作为 grid-gap 的别名，未来推荐直接使用 gap

例如现代写法：

.container {
  display: grid;
  gap: 16px; /* 推荐新写法 */
}

基本上就这些。合理使用 grid-gap 或 gap 能让你的网格布局更清晰、易读，避免手动用 margin 控制间距带来的复杂性。

本篇关于《CSSgrid-gap属性使用教程》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！