在 CSS Grid 布局中，column-gap 和 row-gap 用于控制网格元素之间的间距，但它们作用的方向不同。理解两者的区别有助于更精准地控制布局外观。
column-gap：控制列之间的水平间距
column-gap 设置的是网格中相邻列之间的水平空白距离。它不会影响第一列左侧或最后一列右侧的外边距，只作用于列与列的中间区域。
例如，一个三列的网格布局，使用
column-gap: 20px;
，会在第1列和第2列之间、第2列和第3列之间各添加 20px 的空白。
常见用法：
grid-column-gap: 10px;
（旧语法）
column-gap: 10px;
（现代推荐写法） 可用于 flex 布局，但在 grid 中更常见
row-gap：控制行之间的垂直间距
row-gap 设置的是网格中相邻行之间的垂直间隔。它出现在每一行的下方（除了最后一行），用来分隔上下两个网格行。
立即学习“前端免费学习笔记（深入）”；
绘蛙AI修图
绘蛙平台AI修图工具，支持手脚修复、商品重绘、AI扩图、AI换色
285 查看详情 
比如，有四行内容，设置
row-gap: 15px;
，则在每两行之间插入 15px 的空隙。
示例场景：表单布局中避免输入框贴得太近 卡片列表希望上下留白一致时使用 响应式设计中配合 auto-rows 调整视觉节奏
同时使用 column-gap 和 row-gap
可以单独设置其中一个，也可以同时定义两者。还可用简写属性 gap 来合并书写。
gap: 10px 20px;
→ 分别表示 row-gap 为 10px，column-gap 为 20px
gap: 15px;
→ 行和列的间距都设为 15px
注意：gap 不会影响网格容器的外边缘，也不会被 margin 或 padding 替代。
基本上就这些。掌握 column-gap 和 row-gap 的方向性差异，能让你在构建复杂网格时更得心应手。
以上就是css grid column-gap和row-gap区别解析的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1074416.html
微信扫一扫 
支付宝扫一扫 
