CSS grid - column-gap 属性

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>

打印本页