在 CSS Grid 中，Grid Area 是指由多个网格单元组成的区域。这些网格单元可以是相邻的，也可以是隔开的。在创建 Grid Area 时，我们通常会遇到一个问题：如何处理 Grid Area 间隙？
Grid Area 间隙的问题
在创建 Grid Area 时，我们会用到网格线（Grid Line），它们是指网格单元的分界线。当我们定义 Grid Area 时，通常会指定它所占据的网格单元的起始网格线和结束网格线。例如：
-- -------------------- ---- -------
----- -
-------- -----
---------------------- --------- -----
------------------- --------- -----
--------------------
------- ------ -------
-------- ---- -----
------- ------ --------
-
------- -
---------- -------
-
-------- -
---------- --------
-
----- -
---------- -----
-
------- -
---------- -------
-在上面的代码中，我们定义了一个名为 .grid 的网格容器，它包含了一个头部（header）、侧边栏（sidebar）、主体（main）和底部（footer）。我们通过 grid-template-areas 属性指定了它们所占据的网格单元。例如，头部占据了第一行的所有列，侧边栏占据了第二行的第一列和第二行的第一列，主体占据了第二行的第二列和第三列，底部占据了第三行的所有列。
然而，在实际情况中，我们可能希望在 Grid Area 之间留出一些间隙，以便让页面更加美观。但是，如果我们直接在 Grid Area 中添加间隙，可能会导致网格布局出现问题。例如，如果我们在主体（main）和侧边栏（sidebar）之间添加间隙，可能会导致它们之间的网格单元不对齐，从而破坏了整个网格布局。
处理 Grid Area 间隙的方法
为了解决这个问题，我们可以利用 Grid Area 的另一个属性：grid-column-gap 和 grid-row-gap。这两个属性用于设置网格单元之间的间隙，它们的值可以是像素、百分比或其他长度单位。
例如，如果我们想在主体（main）和侧边栏（sidebar）之间留出 20 像素的间隙，可以这样做：
-- -------------------- ---- -------
----- -
-------- -----
---------------------- --------- -----
------------------- --------- -----
--------------------
------- ------ -------
-------- ---- -----
------- ------ --------
---------------- -----
-
------- -
---------- -------
-
-------- -
---------- --------
-
----- -
---------- -----
-
------- -
---------- -------
-在上面的代码中，我们在 .grid 中添加了 grid-column-gap: 20px 属性，它会在主体（main）和侧边栏（sidebar）之间添加 20 像素的间隙。这样一来，我们就可以在不破坏网格布局的情况下，为 Grid Area 之间添加间隙了。
示例代码
下面是一个完整的示例代码，帮助你更好地理解如何处理 Grid Area 间隙：
-- -------------------- ---- -------
--------- -----
------
------
---------- ---- ----- ---- ---- ----------
-------
----- -
-------- -----
---------------------- --------- -----
------------------- --------- -----
--------------------
------- ------ -------
-------- ---- -----
------- ------ --------
---------------- -----
-
------- -
---------- -------
----------------- --------
-------- -----
-
-------- -
---------- --------
----------------- --------
-------- -----
-
----- -
---------- -----
----------------- --------
-------- -----
-
------- -
---------- -------
----------------- --------
-------- -----
-
--------
-------
------
---- -------------
---- ---------------------------
---- -----------------------------
---- ----------------- -------------
---- ---------------------------
------
-------
-------在上面的代码中，我们定义了一个名为 .grid 的网格容器，它包含了一个头部（header）、侧边栏（sidebar）、主体（main）和底部（footer）。我们通过 grid-template-areas 属性指定了它们所占据的网格单元。例如，头部占据了第一行的所有列，侧边栏占据了第二行的第一列和第二行的第一列，主体占据了第二行的第二列和第三列，底部占据了第三行的所有列。
我们还在 .grid 中添加了 grid-column-gap: 20px 属性，它会在主体（main）和侧边栏（sidebar）之间添加 20 像素的间隙。这样一来，我们就可以在不破坏网格布局的情况下，为 Grid Area 之间添加间隙了。
总结
在 CSS Grid 中，Grid Area 是指由多个网格单元组成的区域。当我们创建 Grid Area 时，通常会遇到一个问题：如何处理 Grid Area 间隙？为了解决这个问题，我们可以利用 Grid Area 的 grid-column-gap 和 grid-row-gap 属性，它们用于设置网格单元之间的间隙。这样一来，我们就可以在不破坏网格布局的情况下，为 Grid Area 之间添加间隙了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/657d5724d2f5e1655d827455