CSS Grid 是 Web 开发中布局的重要工具之一，它能够让我们使用网格来定义页面的结构和样式。在 CSS Grid 中，我们可以使用 grid-template 属性来定义图形的样式和布局。
本文将详细介绍如何使用 grid-template 属性来定制自己的网格布局，并提供适当的代码示例及指导意义，希望对大家学习 CSS Grid 以及网格布局有所帮助。
grid-template-columns 和 grid-template-rows
在 CSS Grid 中，我们可以通过设置 grid-template-columns 和 grid-template-rows 属性来定义网格的列数和行数，以及它们的大小。
--------------- -
-------- -----
---------------------- ----- --- ----
------------------- ----- --- ----
-上面的代码将会创建一个包含 3 列和 3 行的网格布局。第一列的宽度为 200 像素，第二列和第三列自适应网格容器的剩余宽度。第一行的高度也是 200 像素，第二行和第三行自适应网格容器的剩余高度。
为了更好的呈现效果，我们可以对上述代码进行进一步解释，如下：
grid-template-columns: 200px 1fr 2fr;将会让第一列的宽度为 200px，第二列和第三列的宽度分别占据剩余空间的 1/3 和 2/3。grid-template-rows: 200px 1fr 2fr;将会让第一行的高度为 200px，第二行和第三行的高度分别占据剩余空间的 1/3 和 2/3。
可以看出，通过对 grid-template-columns 和 grid-template-rows 属性的设置，我们可以轻松地控制网格容器的行数和列数，并实现自适应布局效果。
grid-template
除了可以设置 grid-template-columns 和 grid-template-rows 属性，我们还可以使用 grid-template 属性，以一种更简单和直观的方式来定义网格布局。
--------------- -
-------- -----
-------------- --------- ---- - --------- -----
-在上面的代码中，我们使用 grid-template 属性将创建一个具有三列和三行的网格布局，具有等分的列和行。
实际上，grid-template 属性可以使用许多不同的值和单位来定义网格布局的样式和布局。例如，我们可以使用 auto-fill 和 minmax 函数来动态设置网格的大小和数量。
--------------- -
-------- -----
---------------------- ----------------- ------------- ------
-上述代码将会创建一种自适应的网格布局，其中每个网格的最小宽度为200像素，但网格的数量可以根据设置的最大宽度而变化。当容器的宽度变窄时，网格的数量也会相应缩减。当容器的宽度增加时，网格的数量也会增加。
结论
到此为止，我们已经详细介绍了使用 grid-template 定义网格布局的方法，以及如何使用 grid-template-columns 和 grid-template-rows 属性来定制网格布局。
在 CSS Grid 中，网格布局是非常有用和适用的工具，使用它可以使我们更好地布局和组织我们的页面内容。需要注意的是，对于不同的页面布局需求，我们可以根据实际需求选择不同的方法和属性来实现。
希望本文能为您在学习 CSS Grid 的过程中提供一些指导和帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6703caf8d91dce0dc84ca7c2