CSS Grid 是一种灵活的布局方式，能够让我们以栅格的形式来布局各种元素，它的优点包括：
- 减少 DOM 操作；
- 布局更加灵活和精细；
- 可以实现复杂的布局；
- 可以支持响应式设计。
在使用 CSS Grid 时，最重要的是明确 Grid 的容器和子元素的关系，因此在使用 Grid 容器时需要注意一些容器元素的使用技巧。本文将重点介绍关于 Grid 容器元素注意事项，包括 grid-template-areas、grid-template-columns、grid-template-rows 、grid-auto-rows、grid-auto-columns 和 grid 以及对应的使用示例，希望能够对读者有所帮助。
grid-template-areas
grid-template-areas 属性可以指定一个或多个以空格分隔的字符串，每个字符串代表一个布局方案，其中 . 代表空白区域，描绘了 Grid 布局中每个项目所占的区域。用它可以方便地实现两列和两行等布局，例如：
-- -------------------- ---- -------
--------------- -
-------- -----
--------------------
------- -------
---- ------
---------------------- --- ---
------------------- ---- ----
-
------- -
---------- -------
-
---- -
---------- ----
-
----- -
---------- -----
-当然，grid-template-areas 的使用也有一些注意事项：
grid-template-areas中的字符串必须有相同的个数和相同的名称。- 字符串中必须使用相应的单引号或双引号。
- 字符串中不能使用相同的名称出现两次。
grid-template-columns 和 grid-template-rows
grid-template-columns 和 grid-template-rows 属性可以制定容器中每一列和每一行的大小和数量。它们接收的值可以是长度、百分比或自动命名。 例如，grid-template-columns: 1fr 1fr 将容器分成两列，两列的大小相等。需要注意的是，如果你使用了多个相同的 grid-template-columns 声明，只有第一个会起作用。
此外，也需要注意：
- 每个项目都必须被包含在这个行和列之中。
- 使用 auto 关键字作为行或列的大小时，浏览器将根据项目自动计算它的大小。
- 使用 repeat() 函数可以轻松定义重复性的网格项目。
-- -------------------- ---- ------- --------------- - -------- ----- ---------------------- --------- ----- ------------------- --------- ----- --------- ----- - ----- - ----------------- ----- ------- --- ----- ------ -------- ----- -
grid-auto-rows 和 grid-auto-columns
如果 Grid 容器中的子元素的数量超过指定的行和列的数量，grid-template-columns 和 grid-template-rows 属性无法容纳这些元素，这时就需要使用 grid-auto-rows 和 grid-auto-columns 属性来设置这些元素的大小和位置。这些属性将自动为新增加的子元素分配网格。
-- -------------------- ---- ------- --------------- - -------- ----- ---------------------- --- --- ---- ------------------- ----- --------------- ----- - ----- - ----------------- ---- ------- --- ----- ------ -------- ----- -
grid
grid 是一个快捷属性，可用于设置所有网格属性。它接受一个重复性的值，分别代表：
- 行大小（grid-template-rows）;
- 列大小（grid-template-columns）;
- 网格行隔（row-gap) 和列隔（column-gap）;
- 余下的空间分配方式（grid-auto-rows）和（grid-auto-columns）。
-- -------------------- ---- -------
--------------- -
-------- -----
-----
----- ----- ----- -
----- ----- ------
--------- -----
-
----- -
----------------- -----
------- --- ----- ------
-------- -----
-总结
以上是关于 Grid 容器元素的使用注意事项，通过灵活使用 Grid 可以轻松地布局和设计网站。希望本文能对读者在学习和使用 Grid 时提供一些帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6450b31c980a9b385b9a5b63