如何用css设置grid-gap控制网格间距-css教程-PHP中文网

如何用css设置grid-gap控制网格间距

P粉602998670

发布： 2025-10-25 13:45:02

原创

453人浏览过

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

如何用css设置grid-gap控制网格间距

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

grid-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;
}

登录后复制

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

示例：

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

登录后复制

这等同于：

美间AI

美间AI：让设计更简单

grid-gap: 15px 20px;

登录后复制

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

小技巧：

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

例如现代写法：

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

登录后复制

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

以上就是如何用css设置grid-gap控制网格间距的详细内容，更多请关注php中文网其它相关文章！

大家都在看：