CSS Grid 布局是一种用于网格化布局的新型 CSS 技术，它使我们能够比以往更容易、更自然地创建复杂的、响应式的布局。而在 CSS Grid 布局中，有一个非常重要的角色，那就是 gap。
gap 是什么
在 CSS Grid 布局中，我们可以使用 grid-template-columns 和 grid-template-rows 等属性来定义网格的列和行，例如：
---------- - -------- ----- ---------------------- --- --- ---- ------------------- ----- ------ -
上面的代码定义了一个拥有三列和两行的网格，其中第一行高度为 100px，第二行高度为 200px。但是，这些列和行之间是没有间距的，它们是“黏”在一起的。这就是 gap 要解决的问题。
gap 是在行和列之间创建间距的属性，它可以让网格看起来更美观，也让在网格中放置内容的工作更容易。例如，我们可以为上面的网格定义一个 20px 的列间距和行间距：
---------- - -------- ----- ---------------------- --- --- ---- ------------------- ----- ------ ---- ----- -
这样，网格就拥有了 20px 的列间距和行间距。
gap 的属性值
gap 可以接受一个或两个长度值作为属性值。如果只有一个长度值，它会被用作行和列之间的通用间距。例如：
---------- - ---- ----- -
上面的代码会为行和列之间都设置一个 20px 的间距。
如果你想要给行和列设置不同的间距，可以使用两个长度值，用空格分隔。例如：
---------- - -------- ----- ----------- ----- -
上面的代码会为行之间设置 10px 的间距，为列之间设置 20px 的间距。
另外，我们还可以使用 grid-row-gap 和 grid-column-gap 来单独设置行或列的间距。
gap 的作用范围
gap 是一个在父元素上设置的属性，它会影响到所有使用了网格布局的子元素。这也就是说，无论子元素是什么标签，都会受到 gap 的影响。
在某些情况下，我们可能想要为某个特定的网格子元素设置不同的间距，这时就需要使用 padding、margin 等属性来进行调整了。
gap 和响应式布局
CSS Grid 布局的一个非常强大的特性就是响应式布局，即同一个网格在不同的屏幕尺寸下可以呈现不同的布局。而 gap 在响应式设计中也发挥着重要的作用。
例如，我们可以针对不同的屏幕宽度使用不同的 gap 值：
---------- -
-------- -----
---------------------- --- --- ----
------------------- ----- ------
-
------ ----------- ------ -
---------- -
---- -----
-
-
------ ----------- ------ -
---------- -
---- -----
-
-上面的代码在屏幕宽度小于等于 768px 时，会将 gap 设置为 10px，而在屏幕宽度大于 768px 时，则会将 gap 设置为 20px。这样，我们就可以为不同的屏幕尺寸设计不同的布局了。
使用实例
下面是一个简单的使用示例，可以帮助你更好地理解 gap 的作用：
--------- -----
------
------
----- ----------------
---------- ---- ----------
-------
---------- -
-------- -----
---------------------- --- --- ----
------------------- ----- ------
---- -----
-
----- -
----------------- --------
------ -----
----------- -------
-------- -----
-
--------
-------
------
---- ------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
------
-------
-------上面的代码定义了一个拥有三列和两行的网格，其中第一行高度为 100px，第二行高度为 200px。每个网格子元素都是一个带有背景色的方块，同时设置了 20px 的内边距。可以尝试修改 gap 属性的值，观察网格的变化。
总结
gap 是一个在 CSS Grid 布局中非常重要的角色，它能够为网格的行和列之间创建间距，让网格看起来更美观，同时也让在网格中放置内容的工作更容易。我们可以通过设置不同的 gap 值来创建不同的布局，而在响应式设计中，gap 更是一个不可或缺的工具。在实际开发中，我们应该根据具体的需求，灵活使用 gap。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/665020c2d3423812e4239fa7