CSS Grid间距控制方法_column-gap row-gap gap解析

CSS Grid 中通过 column-gap、row-gap 和 gap 属性控制网格间距：column-gap 设置列间水平间距，row-gap 设置行间垂直间距，gap 可同时定义两者，支持单值（统一间距）或双值（垂直和水平）。

在使用 CSS Grid 布局时，控制网格项之间的间距非常关键。CSS 提供了三个属性来精确管理这些间距：column-gap、row-gap 和 gap。它们让布局更清晰、更易维护。

column-gap：控制列之间的水平间距

column-gap 用于设置网格中相邻列之间的水平间距。这个属性只影响列轴（inline axis）方向上的空隙。

display: grid;
grid-template-columns: 1fr 1fr 1fr;
column-gap: 20px;

上述代码会创建三列等宽的网格，每列之间有 20px 的水平间距。注意：第一列前和最后一列后不会增加额外间距。

row-gap：控制行之间的垂直间距

row-gap 用于设置网格中相邻行之间的垂直间距。它作用于行轴（block axis）方向。

立即学习“前端免费学习笔记（深入）”；

无涯·问知

无涯·问知，是一款基于星环大模型底座，结合个人知识库、企业知识库、法律法规、财经等多种知识源的企业级垂直领域问答产品

142

查看详情

display: grid;
grid-template-rows: 100px 100px;
row-gap: 15px;

这会创建两行，每行高 100px，中间有 15px 的垂直间隔。

gap：row-gap 与 column-gap 的简写形式

gap 是 row-gap 和 column-gap 的简写属性。它可以接收一个或两个值：

• 一个值：同时设置行和列的间距
• 两个值：第一个是 row-gap，第二个是 column-gap

gap: 10px; /* 行和列间距都是 10px */
gap: 10px 20px; /* 垂直间距 10px，水平间距 20px */

使用 gap 能让代码更简洁，推荐在同时设置行列间距时优先使用。

基本上就这些。column-gap、row-gap 和 gap 是现代 CSS Grid 中控制间距的核心工具，语法简单且兼容性良好，合理使用能让网格布局更加美观和响应灵活。

以上就是CSS Grid间距控制方法_column-gap row-gap gap解析的详细内容，更多请关注php中文网其它相关文章！