在网格布局中，可能会出现一些多余的空白间隔，这可能会让你感到困惑和不满意。然而，有几种方法可以解决这个问题。
不使用网格
首先，我们可以选择不使用网格布局。如果您的设计不需要网络，那么这是一个好的选择。网格布局是一个相对新的 CSS 功能，如果你的项目必须支持旧的浏览器（例如 IE 11），则你可能需要避免使用它。相反，您可以使用传统的 CSS 布局技术，例如浮动、定位和弹性框。
使用 grid-template-columns 属性
如果你想使用网格布局但是又不想留下任何空隙，你可以使用 grid-template-columns 属性。这个属性告诉浏览器每一行中网格单元格的大小，可以使用任何 CSS 长度单位或百分比来定义它。
以下是一个示例代码：
----- - -------- ----- ---------------------- --------- ----- --------- ----- -
在这个例子中，我们告诉浏览器我们想要一个有三列的网格。每列的大小是相等的（1fr），并且它们之间的距离是 20 像素（使用 grid-gap 属性）。
如果您不想让浏览器在末尾添加额外的列（并留下空白）您可以使用 minmax() 函数来限制每一列的最小和最大大小。
以下是一个示例代码：
----- - -------- ----- ---------------------- ---------------- ------------------- --------- ----- -
在这个示例中，我们告诉浏览器，我们想要网格应根据可用空间自动缩放，并且每列的最小大小为 300 像素并且最大大小是相等的。
使用 grid-auto-flow 属性
另一个有用的属性是 grid-auto-flow，它允许我们指定如何放置项目，当它们没有充满可用的空间时。
以下是一个示例代码：
----- - -------- ----- ---------------------- --------- ----- --------------- ------ --------- ----- -
在这个示例中，我们告诉浏览器我们想要一个有三列的网格。我们还告诉它在空间不足时使用 dense 策略来放置项目。这意味着它将尽可能地填满空白，而不是留下空白。
总结
在网格布局中处理多余的空白间隔并不难，只需要了解一些基本属性。我们可以选择不使用网格布局，或者使用 grid-template-columns 属性，或者使用 grid-auto-flow 属性。最后要记住，使用 minmax() 函数来限制每一列的大小。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/652bd48c7d4982a6ebdaf864