CSS column-gap 属性定义列之间的间隙大小。
column-gap 属性最初是 Multi-column Layout（多列布局）的一部分，现在是 Box Alignment （框对齐）的一部分，可用于 Multi-column、Flexible Box 和 Grid 布局。
为了确保与旧版网站的兼容性，CSS Grid 中的 gap 属性最初被命名为 grid-column-gap，浏览器仍将接受 grid-column-gap 作为 column-gap 的别名。
可能的值
- normal − 在浏览器中，多列布局的默认列距为 1em，其他布局类型的默认列距为 0。
- <length> − 长度表示列与列之间的间隙大小，以像素 （px）、厘米 （cm）、英寸 （in） 等为单位。此值不能为负数。
- <percentage> − 百分比 （%） 值表示列之间的间隙大小。此值不能为负数。
适用于
多列元素、flex 容器、网格容器。
DOM 语法
object.style.columnGap = "<length>|<percentage>";
CSS column-gap - <长度>
以下示例演示了 column-gap： 40px 属性在网格布局中添加了 40px 的列间距 −
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
column-gap: 40px;
color: white;
text-align: center;
}
.grid-container > div {
background-color: red;
border: 2px solid blue;
padding: 10px;
}
</style>
</head>
<body>
<div class="grid-container">
<div>Grid item 1</div>
<div>Grid item 2</div>
<div>Grid item 3</div>
<div>Grid item 4</div>
<div>Grid item 5</div>
<div>Grid item 6</div>
</div>
</body>
</html>
CSS column-gap - <百分比>
以下示例演示了 column-gap： 20% 属性在网格布局中添加了 20% 的列间距 -
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
column-gap: 20%;
color: white;
text-align: center;
}
.grid-container > div {
background-color: red;
border: 2px solid blue;
padding: 10px;
}
</style>
</head>
<body>
<div class="grid-container">
<div>Grid item 1</div>
<div>Grid item 2</div>
<div>Grid item 3</div>
<div>Grid item 4</div>
<div>Grid item 5</div>
<div>Grid item 6</div>
</div>
</body>
</html>
CSS column-gap - Flex 布局
以下示例演示了如何使用 column-gap 属性在相邻的 flex 项之间添加列间距。
- display： flex 和 flex-flow： row wrap 属性用于创建 flex 容器。它将 flex 项排成一行。如果项目不适合容器的宽度，它们将移动到下一行。
- nth-of-type（3n） 选择器以每三个 flex 项为目标。
<html>
<head>
<style>
.flex-container {
display: flex;
flex-flow: row wrap;
column-gap: 40px;
}
.flex-container > div {
border: 2px solid red;
background-color: pink;
flex: 100px;
padding: 5px;
}
div:nth-of-type(3n) {
flex: 250px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>Grid Item 1</div>
<div>Grid Item 2</div>
<div>Grid Item 3</div>
<div>Grid Item 4</div>
<div>Grid Item 5</div>
<div>Grid Item 6</div>
</div>
</body>
</html>
Flex 容器中的 Flex 项在每行中水平排列;但是，默认情况下，行之间没有垂直间距。要添加垂直间距，请使用 grid-row-gap 的非零值或 gap 简写来设置 grid-row-gap 和 column-gap 间距。
CSS column-gap - 网格布局
以下示例演示了 column-gap： 20px 属性在网格项目之间添加了 20px 的水平间距 -
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 100px);
column-gap: 20px;
}
.grid-container > div {
padding: 10px;
border: 1px solid red;
background-color: pink;
}
</style>
</head>
<body>
<div class="grid-container">
<div>Grid Item 1</div>
<div>Grid Item 2</div>
<div>Grid Item 3</div>
</div>
</body>
</html>
CSS column-gap - 多列布局
以下示例演示了多列布局，其中 column-count： 3; 属性创建 3 列布局，column-gap： 60px 在列之间添加 60px 的水平空间 -
<html>
<head>
<style>
.grid-container {
color: red;
background-color: lightgreen;
padding: 5px;
column-count: 3;
column-gap: 60px;
}
</style>
</head>
<body>
<div class="grid-container">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
</body>
</html>
