column-gap属性怎么用

column-gap是CSS中用于定义元素列之间间距的属性，它可以应用在多列布局、网格布局和弹性布局等多种布局场景中，帮助开发者快速调整列与列之间的空白距离，让页面布局更美观合理。

column-gap基本语法

column-gap属性的基本语法格式如下：

/* 基本语法 */
column-gap: 长度值 | normal;

/* 示例 */
column-gap: 20px;
column-gap: 2em;
column-gap: normal;

其中长度值可以是px、em、rem等CSS支持的长度单位，normal是默认值，不同布局场景下normal对应的具体间距值会有差异。

不同布局场景下的使用

多列布局中使用

多列布局是通过column-count或column-width属性将内容拆分为多列的场景，此时column-gap用于设置列之间的间距。

/* 多列布局示例 */
.multi-column {
    column-count: 3; /* 分为3列 */
    column-gap: 30px; /* 列间距30px */
    column-rule: 1px solid #eee; /* 列之间的分割线，可选 */
}

<div class="multi-column">
    这是一段测试文本，会被自动拆分为3列显示，列与列之间的间距为30px，分割线为浅灰色的1px实线。
    多列布局适合用于长文本内容的排版，能提升用户的阅读体验。
</div>

网格布局中使用

在CSS Grid布局中，column-gap用于设置网格列之间的间距，和row-gap配合可以分别控制列间距和行间距，也可以使用gap简写属性同时设置。

/* 网格布局示例 */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3列等宽网格 */
    column-gap: 20px; /* 列间距20px */
    row-gap: 15px; /* 行间距15px */
    /* 等价于 gap: 15px 20px; */
}

<div class="grid-container">
    <div class="grid-item">项目1</div>
    <div class="grid-item">项目2</div>
    <div class="grid-item">项目3</div>
    <div class="grid-item">项目4</div>
    <div class="grid-item">项目5</div>
    <div class="grid-item">项目6</div>
</div>

弹性布局中使用

CSS Flex布局从较新的规范开始支持column-gap属性，用于设置弹性项在水平方向上的列间距，不需要再使用margin来手动调整间距。

/* 弹性布局示例 */
.flex-container {
    display: flex;
    flex-wrap: wrap; /* 允许换行 */
    column-gap: 15px; /* 水平方向列间距15px */
    row-gap: 10px; /* 垂直方向行间距10px */
}
.flex-item {
    width: calc(33.333% - 10px); /* 3列布局，减去部分间距 */
    height: 100px;
    background: #f5f5f5;
}

<div class="flex-container">
    <div class="flex-item">弹性项1</div>
    <div class="flex-item">弹性项2</div>
    <div class="flex-item">弹性项3</div>
</div>

常见取值说明

• 长度值：如20px、2rem等，直接指定列间距的具体大小，是最常用的取值方式。
• normal：默认值，不同布局场景下的默认值不同：多列布局中默认是1em，网格布局中默认是0，弹性布局中默认是0。

注意事项

注意浏览器的兼容性，旧版本的浏览器可能不支持弹性布局中的column-gap属性，使用前可以查询对应浏览器的支持情况，必要时添加前缀或备用方案。

另外，column-gap只会影响列之间的间距，不会影响元素的外边距或内边距，和margin、padding属性是独立生效的，使用时不要混淆两者的作用。

column-gapCSS多列布局grid布局flex布局修改时间：2026-06-19 12:21:27