CSS Grid 是一种强大的布局工具，它使用网格来组织和排列网页中的元素。当元素被布置在网格中时，它们可能会超出网格的边界。在这种情况下，我们需要决定如何处理这些超出边界的元素。
网格容器的大小
首先，我们需要考虑的是网格容器的大小。网格容器可以通过设置 width 和 height 属性来定义其大小。当网格容器的大小与网格中所有元素的大小加起来不同的时候，就会出现部分元素超出边界的情况。
下面是一个简单的例子，其中我们设置了一个 3x3 的网格容器，并将其中一个元素的宽度设置为 200px。由于网格容器的宽度只有 400px，因此该元素会超出容器的右边界。
-- -------------------- ---- -------
--------- -----
------
------
-------
--------------- -
-------- -----
---------------------- --- --- ----
------------------- ----- ----- ------
------ ------
------- ------
------- --- ----- ------
-
---------- -
------- --- ----- ------
-
------ -
------ ------
------- ------
----------------- ------
-
--------
-------
------
---- -----------------------
---- ---------------- --------------
---- ---------------- --------------
---- ---------------- --------------
---- ---------------- --------------
---- ---------------- --------------
---- ---------------- --------------
---- ---------------- --------------
---- ---------------- --------------
---- ---------------- --------------
------
-------
-------在这种情况下，我们可以通过设置网格容器的 overflow 属性来决定如何处理超出边界的元素。
overflow 属性
overflow 属性用于控制如何处理容器内的内容。它接受以下四个值：
- visible：默认值。不剪切内容，可以使元素溢出其容器。
- hidden：剪切超出容器范围的内容。
- scroll：剪切超出容器范围的内容，但添加滚动条以使用户能够查看所有内容。
- auto：与 scroll 相似，但只在需要时添加滚动条。
在上面的例子中，我们可以将网格容器的 overflow 属性设置为 hidden，这将剪切超出边界的元素。
-- -------------------- ---- ------- --------------- - -------- ----- ---------------------- --- --- ---- ------------------- ----- ----- ------ ------ ------ ------- ------ ------- --- ----- ------ --------- ------- -
现在，超出边界的绿色元素将被剪切。
使用 grid-auto-flow 属性
另一种方法是使用 grid-auto-flow 属性。该属性用于确定网格中项目的放置方式。默认值是 row，这意味着元素将按行排列。如果我们将其设置为 column，元素将按列排列。
在上述例子中，我们可以将 grid-auto-flow 属性设置为 column，这将使元素以列方式排列，从而避免超出边界的问题。
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
width: 400px;
height: 300px;
border: 1px solid black;
grid-auto-flow: column;
}总结
处理超出边界的元素是 CSS Grid 布局中的一个常见问题。我们可以使用 overflow 属性和 grid-auto-flow 属性来解决这个问题。使用网格自动流属性时需要注意，元素将按照列顺序排列，因此必须确定网格容器的高度，以确保元素不会超出容器的底部。
希望这篇文章对你有所帮助，欢迎探索更广泛的网页布局方法。以下是完整的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
-------
--------------- -
-------- -----
---------------------- --------- -----
------ ------
------- ------
------- --- ----- ------
-- --------- ------- ---
--------------- -------
-
---------- -
------- --- ----- ------
-
------ -
------ ------
------- ------
----------------- ------
-
--------
-------
------
---- -----------------------
---- ---------------- --------------
---- ---------------- --------------
---- ---------------- --------------
---- ---------------- --------------
---- ---------------- --------------
---- ---------------- --------------
---- ---------------- --------------
---- ---------------- --------------
---- ---------------- --------------
------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646b3670968c7c53b0a9da2a