CSS Grid 是一种强大的网格布局系统，它可以让我们创建出复杂的布局，同时易于维护和修改。但是，在使用 CSS Grid 的过程中，我们有时会遇到一些问题，其中一个最常见的问题就是多余网格。本文将介绍 CSS Grid 中的多余网格问题以及容错方案。
什么是多余网格？
在 CSS Grid 中，我们可以通过指定 grid-template-rows 和 grid-template-columns 来创建网格。例如，下面的代码定义了一个 4x4 的网格：
.grid {
display: grid;
grid-template-rows: repeat(4, 1fr);
grid-template-columns: repeat(4, 1fr);
}然而，在某些情况下，我们可能不需要完全填满网格，也就是说，最后一行或最后一列可能会出现多余的网格。
例如，如果我们只需要三行内容，但是却使用了 repeat(4, 1fr)，那么最后一行将会多出一个空白的网格。同样地，如果我们只需要三列内容，但是使用了 repeat(4, 1fr)，那么最后一列将会多出一个空白的网格。
这些多余的网格可能会影响布局的视觉效果，并导致问题。
多余网格的处理方法
方法一：使用 auto-fill 或 auto-fit
使用 auto-fill 或 auto-fit 可以自适应网格大小，从而避免多余网格的问题。使用这两个属性可以确保网格能够填满父元素，并且自适应于所需内容的大小。
示例代码如下：
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}在上面的示例中，grid-template-columns 的值为 repeat(auto-fill, minmax(100px, 1fr))，这意味着列的数量将自动根据容器的大小进行调整。minmax(100px, 1fr) 表示每列的最小宽度为 100 像素，最大为剩余空间的一份之一。
方法二：手动指定网格
手动指定网格可以避免多余网格的问题。在使用手动指定网格时，确保计算行和列的数量，以确保图形布局正确。
示例代码如下：
.grid {
display: grid;
grid-template-rows: 100px 100px 100px;
grid-template-columns: 100px 100px 100px;
}在上面的示例中，我们手动指定了 3 行和 3 列，每个网格的宽度和高度都为 100 像素。
容错方案
上述方法并不能完全避免多余网格的问题，那么如何处理多余网格以及避免产生布局问题？
以下是一些 CSS Grid 中的容错方案：
方案一：使用 display: inline-grid
使用 display: inline-grid 可以避免多余网格的问题，并且在不影响其他元素的情况下进行布局。
示例代码如下：
.parent {
column-count: 2;
}
.child {
display: inline-grid;
grid-template-columns: repeat(auto-fill, 100px);
}在上面的示例中，我们使用 column-count 创建列并在每列中放置一个 inline-grid 元素，这个元素包含了我们想展示的网格。
方案二：使用 grid-auto-flow: dense
使用 grid-auto-flow: dense 可以将多余网格填充，并尽可能减少布局问题。
示例代码如下：
-- -------------------- ---- ------- ----- - -------- ----- ---------------------- --------- ----- --------------- ------ - ------- - --------------- -- ------------- ---- -- ------------------ -- ---------------- ---- -- -
在上面的示例中，我们使用 grid-auto-flow: dense 将多余网格填充。我们还手动指定了 item-2 元素的位置，这将确保布局正确，并避免多余网格的问题。
结论
在使用 CSS Grid 的过程中，多余网格是一个常见的问题。为了避免这个问题，我们可以使用 auto-fit 或 auto-fill 创建自适应网格；或者使用手动指定网格的方式来去除多余网格的问题。最后，在出现多余网格的情况下，我们可以使用 display: inline-grid 或 grid-auto-flow: dense 等容错方案，以确保布局正确。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672b75c7ddd3a70eb6d2c766