前言
CSS Grid 是一种强大的布局方式，它能够让我们轻松地创建复杂的网格布局。然而，有时候我们不小心会遇到 CSS Grid 元素溢出的问题，又或者想要实现居中布局，但又不知道该如何下手。那么本篇文章就会详细地讲解如何避免 CSS Grid 元素溢出，并实现居中布局。
避免 CSS Grid 元素溢出
问题描述
当使用 CSS Grid 进行布局时，有时候可能会遇到元素溢出的问题。如下图所示，元素超出了网格容器的范围。
解决方案
1. 使用 auto-fit 和 auto-fill
auto-fit 和 auto-fill 是 CSS Grid 中很有用的属性，它们可以控制自动布局的行或列的数量。在使用时，我们只需将它们与 minmax() 函数一起使用，如下所示：
----- - -------- ----- ---------------------- ---------------- ------------- ------ -
这个例子将会创建一个网格布局，自动填充容器的空白区域，并确保每个栅格的最小尺寸为 200px，最大尺寸为 1fr。这样一来，就能顺利避免元素溢出的问题。
2. 使用 grid-template-rows 和 grid-template-columns
这个解决方案的思路是通过在 grid-template-rows 和 grid-template-columns 中的 repeat() 函数中指定相应的尺寸，避免元素溢出的问题。如下所示：
----- - -------- ----- ------------------- --------- ------- ---------------------- --------- ------- -
这个例子将创建一个网格布局，共有 2 行和 2 列，每行每列的尺寸均为 150px。这样，即使我们的元素内容比较多，也不会出现溢出的情况。
3. 使用 overflow: auto
如果我们的栅格布局必须要一个固定的宽度和高度，而且里面的内容很多的话，我们可以使用 overflow: auto 实现滚动条。如下所示：
----- - -------- ----- ---------------------- --------- ----- ------------------- ---- ------ ----- ------- ----- --------- ----- -
这个例子将会创建一个水平栅格布局，含有四个栅格，每个栅格等宽。当内容超出栅格的边界时，浏览器将会显示滚动条来浏览内容。
实现居中布局
问题描述
在 CSS Grid 中，有时候我们需要实现居中布局，这时我们就需要考虑如何处理对象的对齐问题。
解决方案
1. 使用 grid-template-areas
grid-template-areas 可以让我们在栅格布局中精确地控制元素的位置。我们只需将需要居中布局的元素包在 div 中，并定义一个新的类居中，如下所示：
---- ------------- ---- ----------------- --- --------- ------- --- ---------- ------- --- ---------- ------- --- ---------- ------
----- -
-------- -----
---------------------- --------- -----
------------------- --------- -----
--------------------
-- - - --
-- ------ ------ --
-- ------ ------ --
-- - - ---
-
------- -
---------- -------
-------- -----
---------------- -------
------------ -------
-这个例子将会创建一个栅格布局，由 4 行和 4 列组成。我们将中央的那个 div 取名为 center，然后使用 grid-template-areas 来定义它的位置。最后，我们给这个 div 加上了一个 CSS 类，以实现居中布局。
2. 使用 justify-content 和 align-items
我们可以在网格布局中使用 justify-content 和 align-items 属性来实现水平和垂直居中。经过如下设置：
----- - -------- ----- ---------------- ------- ------------ ------- -
这个例子将会创建一个栅格布局，其中的内容会在水平和垂直方向上都居中。我们只需通过添加样式类，将要居中的元素添加到栅格布局中即可。
总结
本篇文章介绍了如何避免 CSS Grid 的元素溢出问题，并实现了居中布局。尤其是对于 CSS Grid 的自适应布局，在实战中的应用是非常广泛的。希望读者们通过本篇文章的学习，能够更加深入地理解和应用 CSS Grid。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65348e6b7d4982a6eb94cdfb