列间距 | CSS-Tricks 中文

CSS column-gap 属性在 CSS 网格、弹性盒和 CSS 列布局中设置列之间的间距（也称为“间隙”）。

上下文

如果您想知道为什么我们在已经有 grid-column-gap 属性的情况下还需要 column-gap 属性，那么您并不孤单！事实上，column-gap 实际上取代了 grid-column-gap。通过去掉 grid- 前缀，更清楚地表明，我们可以在比 CSS 网格更多的情况下控制间距。

是的，如果您已经在使用 grid-column-gap，那么这会有点麻烦，因为您现在必须为最广泛的浏览器支持同时声明两者，直到浏览器赶上这种变化。所以，“面向未来的”实现可能看起来像这样，支持 column-gap 的浏览器将使用它，不支持的浏览器将跳过它并使用 grid-column-gap 代替。

.something {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 25px;
  column-gap: 25px;
}

语法

column-gap: normal | <length-percentage>

初始值：normal
应用于：多列容器、弹性容器、网格容器
继承：否
百分比：指的是内容区域的相应尺寸
计算值：指定的关键字，否则为计算的 <length-percentage> 值
动画类型：按计算值类型

这种正式的语法基本上是在说 column-gap 接受 normal 值（这是默认值）或长度值，长度值可以是带单位的值（例如 25px 或 1.25em）或百分比值（例如 10%）。

值

除了 normal 值，row-gap 还接受数字和百分比。“正常”指的是浏览器中的标准值。

/* Default value */
column-gap: normal;

/* <length> values */
column-gap: 50px;
column-gap: 2rem;
column-gap: 1.5em;
column-gap: 5vw;
column-gap: 25ch;

/* <percentage> value */
column-gap: 15%;

/* Global values */
column-gap: inherit;
column-gap: initial;
column-gap: unset;