在使用 CSS Grid 进行布局时，我们经常需要将多个元素包裹在一个网格项中，从而实现更加灵活的布局。但是，默认情况下，这些包裹元素之间可能存在一定的垂直间距，这可能不是我们期望的效果。
接下来，我们将介绍如何使用 CSS Grid 中的一些技巧，来排除包裹元素的垂直间距。
问题分析
先来看一下问题模型：
HTML：
<div class="wrapper"> <div class="item">A</div> <div class="item">B</div> </div>
CSS：
-- -------------------- ---- ------- -------- - -------- ----- ---------------------- --------- ----- ---- ----- - ----- - ----------------- ----- -------- ----- -
效果如下：
我们通过 display: grid; 将 .wrapper 设置为网格容器，通过 grid-template-columns: repeat(2, 1fr); 将其划分为两列网格，并设置了 gap: 10px; 作为网格项之间的间距。
在容器内部，我们使用了两个 .item 作为包裹元素，并为其设置了一些基本样式。然而，我们发现这两个包裹元素之间还存在一定的垂直间距，这通常不是我们所期望的效果。
为了解决这个问题，我们可以采用以下两种方法。
方法一：使用 grid-auto-flow: dense;
第一种方法是使用 grid-auto-flow: dense; 属性。这个属性的作用是，当容器中存在空缺网格时，会尝试填充它们，从而更加紧凑地布局。
HTML：
<div class="wrapper"> <div></div> <div class="item">A</div> <div class="item">B</div> </div>
CSS：
-- -------------------- ---- ------- -------- - -------- ----- ---------------------- --------- ----- ---- ----- --------------- ------ - ----- - ----------------- ----- -------- ----- -
效果如下：
我们通过在 .wrapper 中添加一个空白的 <div>，使得第一个 .item 与容器左对齐，第二个 .item 与容器右对齐，从而达到消除垂直间距的效果。
不过，这种方法需要手动添加一个额外的元素，可能并不是很直观和方便。
方法二：使用 align-items: start;
第二种方法是使用 align-items: start; 属性。这个属性的作用是，将包裹元素的纵向对齐方式设为起始位置（即顶部对齐），从而消除它们之间的垂直间距。
HTML：
<div class="wrapper"> <div class="item">A</div> <div class="item">B</div> </div>
CSS：
-- -------------------- ---- ------- -------- - -------- ----- ---------------------- --------- ----- ---- ----- ------------ ------ - ----- - ----------------- ----- -------- ----- -
效果如下：
我们通过在 .wrapper 中添加 align-items: start; 属性，将包裹元素的纵向对齐方式设为顶部对齐，从而消除它们之间的垂直间距。
这种方法比较简单和直观，也比较容易掌握。
总结
CSS Grid 提供了很多强大的布局功能，但在实际使用中，可能会遇到一些不太符合预期的情况，比如包裹元素之间的垂直间距。我们可以通过一些巧妙的技巧，如使用 grid-auto-flow: dense; 或 align-items: start; 属性，来解决这些问题。
当然，这些技巧只是冰山一角，CSS Grid 的更多功能和用法还需要我们不断地学习和探索。希望本文能够对大家有一定的指导意义。
完整示例代码如下：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------- ---- ----------------------
-------
-------- -
-------- -----
---------------------- --------- -----
---- -----
-- --- --
-- --------------- ------ --
-- --- --
-- ------------ ------ --
-
----- -
----------------- -----
-------- -----
-
--------
-------
------
---- ----------------
---- --- ---
---- ----------- ---
---- --------------------
---- --------------------
------
-------
-------
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645103f2980a9b385b9db07d