在 CSS Grid 布局中，column-gap 和 row-gap 用于控制网格元素之间的间距，但它们作用的方向不同。理解两者的区别有助于更精准地控制布局外观。
column-gap 设置的是网格中相邻列之间的水平空白距离。它不会影响第一列左侧或最后一列右侧的外边距，只作用于列与列的中间区域。
例如，一个三列的网格布局，使用
column-gap: 20px;
grid-column-gap: 10px;
column-gap: 10px;
row-gap 设置的是网格中相邻行之间的垂直间隔。它出现在每一行的下方（除了最后一行），用来分隔上下两个网格行。
立即学习“前端免费学习笔记（深入）”；
比如，有四行内容，设置
row-gap: 15px;
可以单独设置其中一个，也可以同时定义两者。还可用简写属性 gap 来合并书写。
gap: 10px 20px;
gap: 15px;
注意：gap 不会影响网格容器的外边缘，也不会被 margin 或 padding 替代。
基本上就这些。掌握 column-gap 和 row-gap 的方向性差异，能让你在构建复杂网格时更得心应手。
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
797
收藏
