CSS Grid 是 Web 前端开发中的一个重要布局技术，在处理容器内的排列方式、对齐方式等方面都有非常好的表现。但是，在某些情况下，被包裹的内容在 Grid 中会出现不居中的问题，这就需要我们对 Grid 的使用进行更加深入的学习和理解。
问题描述
在使用 CSS Grid 进行页面布局时，经常需要用到一个放置内容的容器，常用的属性是 grid-template-areas、grid-template-columns 和 grid-template-rows，很多开发者可能知道这些属性是如何使用的，但却经常遇到一个问题：在使用 Grid 进行布局时，被包裹的内容并不一定会居中。
-- -------------------- ---- -------
------
------
-------
-------- -
-------- -----
---------------------- --------- -----
---- -----
-
---- -
------- --- ----- -----
------- ------
-------- -----
---------------- -------
------------ -------
-
--------
-------
------
---- ----------------
---- --------------- -------
---- --------------- -------
---- --------------- -------
---- --------------- -------
---- --------------- -------
---- --------------- -------
------
-------
-------执行以上代码，我们会发现被包裹的内容并没有居中，如下图所示：
在这个例子中，我们使用了 display: flex 和 justify-content: center; align-items: center 来将内容居中，但仍然无法解决内容不居中的问题。接下来，我们将深入学习 CSS Grid 布局，并尝试解决上述问题。
解决方案
方法一：使用 auto 填充
我们可以对被包裹的内容使用 auto 填充，从而实现居中对齐。
-- -------------------- ---- -------
------
------
-------
-------- -
-------- -----
---------------------- --------- -----
---- -----
-------------- -------
------------ -------
-
---- -
------- --- ----- -----
------- ------
-------- -----
---------------- -------
------------ -------
------------ ---- --
--------- ---- --
-
--------
-------
------
---- ----------------
---- --------------- -------
---- --------------- -------
---- --------------- -------
---- --------------- -------
---- --------------- -------
---- --------------- -------
------
-------
-------在上述代码中，我们使用 justify-items: center 和 align-items: center 将网格内的内容居中对齐。同时，对于每个被包裹的内容，我们使用了 grid-column: span 1 和 grid-row: span 1，这表示每个内容跨越一个网格。
执行以上代码，我们可以得到以下效果：
方法二：使用 grid-template-areas 和 place-items
我们可以使用 grid-template-areas 和 place-items 属性，从而实现更加精确的居中对齐。
-- -------------------- ---- -------
------
------
-------
-------- -
-------- -----
---------------------- --------- -----
---- -----
--------------------
--- -- ---
--- -- ----
------------ -------
-
---- -
------- --- ----- -----
------- ------
-------- -----
---------------- -------
------------ -------
-
------ -
---------- ---
-
------ -
---------- ---
-
------ -
---------- ---
-
------ -
---------- ---
-
------ -
---------- ---
-
------ -
---------- ---
-
--------
-------
------
---- ----------------
---- ---------- ---------- -------
---- ---------- ---------- -------
---- ---------- ---------- -------
---- ---------- ---------- -------
---- ---------- ---------- -------
---- ---------- ---------- -------
------
-------
-------在上述代码中，我们使用了两个新的属性：grid-template-areas 和 place-items。
grid-template-areas用于定义网格的结构，其中每个网格由一个字符串表示。这里我们将容器分为两行三列，分别对应字符串"a1 a2 a3"和"a4 a5 a6"，被包裹的内容分别对应这两行字符串中的位置。place-items用于将元素居中，包括每个元素在交叉轴上的位置和内容本身在主轴上的位置。
执行以上代码，我们可以得到以下效果：
总结
通过以上的学习，我们可以看出，在使用 CSS Grid 进行页面布局时，出现内容不居中的问题时，可以采用 auto 填充和 grid-template-areas 两种方法进行解决。
同时，我们还需要注意到以下几点：
- 在使用 Grid 进行布局时，应该尽量减少 Grid 容器内的元素数量，对每个元素进行仔细的定位，以便更好地控制元素的位置。
- 要仔细理解 Grid 容器、网格线等相关概念，对元素的定位有更加准确的掌握。
- 在进行居中对齐时，应该充分考虑
auto填充和grid-template-areas两种方法的优缺点，选择最合适的方案进行使用。
通过深入学习和理解，我们才能更好地掌握 CSS Grid 布局技术，为 Web 前端开发提供更好的服务。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646afa9d968c7c53b0a6edd4