CSS Grid 真是一项令人兴奋的技术！ 它可以轻松地解决排版难题， 但有时候在实现时，我们会发现出现了讨厌的“间隙”。
“间隙”基本上是因为浏览器对于网格元素理解的不同，导致相邻的网格元素之间留有空白空间。它虽然看起来很小，但在排版中依然是一个令人讨厌的问题，甚至可能破坏设计。
虽然这是一个常见的问题，但它可以通过敏锐地观察和一些技巧很容易地解决。 我们来看一下如何在 CSS Grid 中解决这个问题吧！
理解 grid-gap
在 CSS Grid 中，使用 grid-gap 属性可以设置网格行或列之间的间距。 但是， 如果将这个属性应用于每个网格元素，它只会将元素之间的间距增大，并不会实际解决“间隙”问题。
让我们看看一个具有“间隙”的网格布局示例，如下所示：
-- -------------------- ---- ------- --------------- - -------- ----- ---------------------- --- ---- ------------------- ---- ----- --------- ----- - ---------- - ----------------- ----- -
<div class="grid-container"> <div class="grid-item">1</div> <div class="grid-item">2</div> <div class="grid-item">3</div> <div class="grid-item">4</div> </div>
您可以发现，在示例中，元素之间的间距实际上比指定的间距要大得多，这是非常烦人的。
使用负 margin 解决问题
为了解决这个问题，我们可以通过使用负 margin 来补偿元素之间的空白。 最好的方法是对于每个使用 span 关键字定义的网格元素，向其添加负 margin 来使相邻元素之间的距离完全对齐。
在我们的示例中，我们将会用 span 2 来定义相邻的两个单元格元素。因此，在这种情况下，我们需要向第二个单元格元素添加负 margin 来将它与第一个单元格元素和其他元素对齐。
-- -------------------- ---- ------- ---------- - ----------------- ----- -------- ----- - ----------------- - ------------ ---- -- ------------- ------ -
<div class="grid-container"> <div class="grid-item span-2">1</div> <div class="grid-item">2</div> <div class="grid-item">3</div> <div class="grid-item">4</div> </div>
这里我们设定了 .span-2 类来对单元格元素进行定义。使用上面提到的代码，我们成功地解决了“间隙”的问题。
总结
在 CSS Grid 中，我们可以使用 grid-gap 属性设置行或列之间的间距，但这并不适用于消除通过网格布局之间的元素之间产生的“间隙”问题。通过使用负 margin，我们可以轻松地消除元素之间的空白。
总的来说，这种技巧并不是很难掌握，但在实际应用中会遇到很多具体情况。建议在样式表前先将网格布局示意图画出来，看看哪些元素之间需要加上负代价来消除间隙。使用这种技术时一定要小心，确保它不会影响您的网格布局的其他方面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6451ab47675af4061b5760d7