CSS gap 属性
css3基础 2023-07-30 16:16:39小码哥的IT人生shichen
CSS gap 属性
定义和用法
gap 属性定义 flexbox、网格或多列布局中行与列之间的间隙大小。它是以下属性的简写属性：
注意：gap 属性以前被称为 grid-gap。
另请参阅：
CSS 教程：CSS 网格布局
CSS 教程：CSS 弹性框布局
CSS 教程：CSS 多列布局
CSS 参考手册：row-gap 属性
CSS 参考手册：column-gap 属性
实例
例子 1
将行与列之间的间距设置为 50px：
.grid-container {
gap: 50px;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
border: 1px solid black;
background-color: mintcream;
display: grid;
grid-template-columns: auto auto auto;
gap: 50px;
}
.grid-container > div {
border: 1px solid black;
background-color: yellow;
}
</style>
</head>
<body>
<h1>gap 属性</h1>
<p>使用 <em>gap</em> 属性指定行和列之间的间隙大小。</p>
<p>这个网格在行之间和列之间有 50px 的间隙：</p>
<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>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
例子 2：网格布局
在网格布局中将行间距设置为 20px，将列间距设置为 50px：
#grid-container {
display: grid;
gap: 20px 50px;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
#grid-container {
border: 1px solid black;
background-color: mintcream;
display: grid;
grid-template-columns: auto auto auto;
gap: 20px 50px;
}
#grid-container > div {
border: 1px solid black;
background-color: yellow;
}
</style>
</head>
<body>
<h1>在网格中使用 gap 属性</h1>
<p>使用 <em>gap</em> 属性指定行和列之间的间隙大小。</p>
<p>这个网格在行之间有 20px 的间隙，在列之间有 50px 的间隙：</p>
<div id="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>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
例子 3：弹性框布局
在弹性框布局中将行间距设置为 20px，将列间距设置为 70px：
#flex-container {
display: flex;
gap: 20px 70px;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
#flex-container {
border: 1px solid black;
background-color: rgb(255, 230, 251);
display: flex;
flex-wrap: wrap;
gap: 20px 70px;
}
#flex-container > div {
border: 1px solid black;
width: 10%;
aspect-ratio: 2;
padding: 10px;
background-color: lightgreen;
}
</style>
</head>
<body>
<h1>在弹性框中使用 gap 属性</h1>
<p>使用 <em>gap</em> 属性指定 flexbox 布局中行和列之间的间隙大小。</p>
<p>这个弹性框布局在行之间有 20px 的间距，在列之间有 70px 的间距：</p>
<div id="flex-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>13</div>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
例子 4：多列布局
在多列布局中将列间距设置为 50px：
#newspaper {
columns: 3;
gap: 50px;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
#newspaper {
border: solid black 1px;
background-color: lightgoldenrodyellow;
columns: 3;
gap: 50px;
}
</style>
</head>
<body>
<h1>在多列布局中使用 gap 属性</h1>
<p>在多列布局中使用 <em>gap</em> 属性来指定列之间的间隙大小。</p>
<p>这个多列布局的列之间有 50px 的间距：</p>
<div id="newspaper">
第一回
宴桃园豪杰三结义
斩黄巾英雄首立功
话说天下大势，分久必合，合久必分：周末七国分争，并入于秦；及秦灭之后，楚、汉分争，又并入于汉；汉朝自高祖斩白蛇而起义，一统天下，后来光武中兴，传至献帝，遂分为三国。推其致乱之由，殆始于桓、灵二帝。桓帝禁锢善类，崇信宦官。及桓帝崩，灵帝即位，大将军窦武、太傅陈蕃，共相辅佐；时有宦官曹节等弄权，窦武、陈蕃谋诛之，机事不密，反为所害，中涓自此愈横。建宁二年四月望日，帝御温德殿。方升座，殿角狂风骤起，只见一条大青蛇，从梁上飞将下来，蟠于椅上。帝惊倒，左右急救入宫，百官俱奔避。须臾，蛇不见了。忽然大雷大雨，加以冰雹，落到半夜方止，坏却房屋无数。建宁四年二月，洛阳地震；又海水泛溢，沿海居民，尽被大浪卷入海中。光和元年，雌鸡化雄。六月朔，黑气十馀丈，飞入温德殿中。秋七月，有虹现于玉堂，五原山岸，尽皆崩裂。种种不祥，非止一端。帝下诏问群臣以灾异之由，议郎蔡邕上疏，以为蜺堕鸡化，乃妇寺干政之所致，言颇切直。帝览奏叹息，因起更衣。曹节在后窃视，悉宣告左右；遂以他事陷邕于罪，放归田里。后张让、赵忠、封谞、段珪、曹节、侯览、蹇硕、程旷、夏恽、郭胜十人朋比为奸，号为“十常侍”。帝尊信张让，呼为“阿父”。朝政日非，以致天下人心思乱，盗贼蜂起。
...... ......
</div>
<p><b>注释：</b>在 Safari 16 版本中多列布局目前不支持 Gap 属性。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
CSS 语法
gap: row-gap column-gap|initial|inherit;
| 值 | 描述 |
|---|---|
| row-gap | 设置网格或弹性框布局中行之间的间隙大小。 |
| column-gap | 设置网格、弹性框或多列布局中列之间的间隙大小。 |
| initial | 将此属性设置为其默认值。参阅 initial。 |
| inherit | 从其父元素继承此属性。参阅 inherit。 |
技术细节
| 默认值： | normal normal |
|---|---|
| 继承： | 否 |
| 动画制作： | 支持。请查看单独的属性。请参阅：动画相关属性。 |
| 版本： | CSS Box Alignment Module Level 3 |
| JavaScript 语法： | object.style.gap="50px 100px" |
浏览器支持
表格中的数字注明了完全支持该属性的首个浏览器版本。
| 布局 | Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| 在网格中 | 66 | 16 | 61 | 12 | 53 |
| 在弹性框中 | 84 | 84 | 63 | 14.1 | 70 |
| 在多列中 | 66 | 16 | 61 | 不支持 | 53 |
