CSS | grid-column-gap 属性

简介

grid-column-gap 属性用于设置网格布局中网格列（grid-column）之间的间距。该属性值可为长度值（如像素、百分比等）或指定为关键字 normal（默认值），表示使用浏览器的默认列间距。

语法

grid-column-gap: <length> | normal;

• <length>：指定列间距的长度值（如 10px、1em、25% 等）。
• normal：默认值，表示使用浏览器的默认列间距。

示例

HTML

<div class="grid">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
</div>

CSS

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 20px;
}

.item {
  background-color: #f0f0f0;
  padding: 20px;
  text-align: center;
}

效果

在上述示例中，我们通过 display: grid 属性将 .grid 元素转换为网格容器。使用 grid-template-columns 属性定义该网格容器的列布局，其中我们使用 repeat() 函数指定了四列的宽度均为 1fr（等分剩余空间）。最后，使用 grid-column-gap 属性设置了列间距为 20px，使网格元素在水平方向具有间距。

注意事项

• grid-column-gap 属性是 grid-gap 属性的简写形式，该属性同时设置网格列和行之间的间距。如果需要分别设置列和行间距，可以使用 grid-column-gap 和 grid-row-gap 属性分别指定。
• grid-column-gap 属性值不会影响网格容器的布局，只是在网格元素之间添加了空白间隔。
• grid-column-gap 属性可以继承，并且可以被层叠覆盖。
• 支持该属性的浏览器版本请参见 Can I Use。