CSS grid-column-gap 属性值说明
| 值 | 描述 |
|---|---|
| none | 这是此属性的默认值，它等于0。 |
| length | 列之间的间隙由PX或者百分比指定。不允许使用负值。 |
| initial | 使属性使用其默认值。 |
| inherit | 从父母元素继承属性。 |
语法
grid-column-gap: normal | length;
grid-column-gap 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-column-gap: 30px;
grid-row-gap: 10px;
background-color: #666;
padding: 10px;
}
.grid-container > div {
background-color: #ccc;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h2>Grid-column-gap 属性示例</h2>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
</body>
</html>
具有“%”值的 grid-column-gap 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-column-gap: 20%;
grid-row-gap: 10px;
background-color: #666;
padding: 10px;
}
.grid-container > div {
background-color: #ccc;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h2>Grid-column-gap 属性示例</h2>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</body>
</html>
grid-column-gap 属性设置列之间的间隙大小。
长度可以通过像素和百分比来指定。
最初定义的 grid-column-gap 属性被 column-gap 属性替换。
但是， grid-column-gap 前缀属性用于浏览器支持。
不允许使用负值。
| 初始值 | 0 |
|---|---|
| 应用于 | 多列元素，Flex容器，网格容器。 |
| 继承 | 无效 |
| 可动画的 | 是的。间距是有动画的。 |
| 版本 | CSS网格布局模块级别1 |
| DOM 语法 | object.style.gridcolumngap =“30px”; |
日期：2020-06-02 22:14:33 来源：oir作者：oir