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

.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 */
}
.container {
gap: 20px 10px;      / row-gap: 20px, column-gap: 10px /
}

兼容性与注意事项

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

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

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

# css  # 浏览器  # safari  # ai  # grid布局  # display  # margin  # padding  # column  # 行之  # 作用于  # 都是  # 这是  # 行间  # 会有  # 第一个  # 出现在  # 设为  # 会在 

相关栏目： 【 Google疑问12 】 【 Facebook疑问10 】 【 网络优化76771 】 【 技术知识130152 】 【 IDC云计算60162 】 【 营销推广131313 】 【 AI优化88182 】 【 百度推广37138 】 【 网站推荐60173 】 【 精选阅读31334 】

相关推荐： Mac怎么安装软件_Mac安装dmg与pkg文件的区别【指南】  php订单日志怎么记录评价_php记录订单评价日志方法【方法】  如何在Golang中验证模块完整性_Golanggo.sum校验与安全实践  Linux如何安装Golang环境_Linux下Go语言开发包配置【方法】  php删除数据怎么清空表_truncate与delete区别及用法【汇总】  Win11怎么设置夜间模式_Windows11显示设置蓝光过滤强度  Windows笔记本无法进入睡眠模式怎么办？（电源疑难解答）  如何在Golang中使用内置函数_Golanglen append make等使用技巧  Python并发安全问题_资源竞争说明【指导】  Windows 11登录时提示“用户配置文件服务登录失败”怎么办_Windows 11修复损坏的用户配置文件  如何使用Golang构建简易投票统计功能_Golang投票数据汇总与展示示例  php下载安装包怎么选_threadsafe与nts版本差异【解答】  Win11怎么卸载Photos应用_Win11卸载Photos应用方法【教程】  Win11截图快捷键是什么_Win11自带截图工具使用技巧【汇总】  Mac自带的词典App怎么用_Mac添加和使用多语言词典【技巧】  Windows服务启动类型恢复方法_错误修改导致的系统服务异常  Win10怎么卸载迅雷_Win10彻底卸载迅雷方法【步骤】  微信短链接怎么还原php_用浏览器开发者工具抓包获取【方法】  C++如何使用std::transform批量处理容器元素？（代码示例）  Windows如何拦截2345弹窗广告_Windows拦截2345弹窗方法【步骤】  Windows如何设置登录时的欢迎屏幕背景？（锁屏界面）  Win11无法拖拽文件到任务栏怎么办_Win11开启拖放功能修复【方法】  Windows家庭版如何开启组策略(gpedit.msc)？（安装方法）  Go语言中slice追加操作的底层共享机制详解  PHP主流架构怎么集成Redis缓存_配置步骤【方法】  Win11怎么禁用键盘自带键盘_Win11笔记本禁用内置键盘方法【教程】  c++ std::future和std::promise c++线程间通信【教程】  c++获取当前时间戳_c++ time函数使用详解  Win11怎么开启游戏模式_Windows11优化游戏帧数设置指南  Linux如何挂载新硬盘_Linux磁盘分区格式化与开机自动挂载【指南】  Mac如何将HEIC图片格式转为JPG_Mac批量转换图片【指南】  如何使用Golang log设置日志输出格式_Golang log日志格式示例  Python对象生命周期管理_创建销毁说明【指导】  如何在Golang中处理模块包路径变化_Golang包重命名与导入方法  PHP cURL GET请求：正确设置认证与自定义请求头的完整教程  Python大文件处理策略_内存优化说明【指导】  如何解决同一段404代码在不同主机上表现不一致的问题  Python lxml的etree和ElementTree有什么区别  Win11怎么关闭边缘滑动手势_Windows11禁用触摸屏边缘操作  Win10如何卸载微软拼音输入法 Win10只保留一个输入法【教程】  PHP中require语句后直接调用返回对象方法的语法解析  Win11怎么自动隐藏任务栏_Win11全屏显示设置【美化】  Win11怎么清理C盘系统错误报告_Win11清理系统错误报告技巧【教程】  Python文件和流处理指南_高效读写大体积数据文件  Win11输入法切换快捷键怎么改_Windows 11自定义语言切换键位【教程】  c++ reinterpret_cast怎么用 c++最危险的类型转换【详解】  php本地部署支持nodejs吗_php与nodejs混合开发环境搭建教程【教程】  Win10如何卸载自带Edge_Win10彻底卸载Edge浏览器教程【攻略】  Windows 10怎么把任务栏放在屏幕上方_Windows 10解锁任务栏并拖动位置  php怎么捕获异常_trycatch结构处理运行时错误的技巧【方法】 

 2025-11-27