CSS Grid 是一种强大的布局系统，可以让开发者轻松地创建复杂的网格布局。其中，grid-template-columns 和 grid-template-rows 是两个非常关键的属性，用于控制网格的列和行的大小和数量。
grid-template-columns 和 grid-template-rows 的基本用法
grid-template-columns 和 grid-template-rows 都是用来定义网格的列和行的大小和数量的属性。它们的基本用法非常简单，只需要在父容器上设置这两个属性的值即可。
---------- - -------- ----- ---------------------- ----- ----- ------ ------------------- ---- ---- ----- -
上面的代码中，我们定义了一个包含 3 列和 3 行的网格布局，每一列的宽度为 100px，每一行的高度为 50px。
使用 repeat() 函数简化代码
如果需要定义多个相同大小的列或行，可以使用 repeat() 函数来简化代码。例如，下面的代码定义了 4 个宽度为 100px 的列和 2 个高度为 50px 的行。
---------- - -------- ----- ---------------------- --------- ------- ------------------- --------- ------ -
使用 minmax() 函数控制网格大小的范围
minmax() 函数可以用来定义网格大小的范围，它接受两个参数，第一个参数是最小值，第二个参数是最大值。例如，下面的代码定义了 3 列，第一列的宽度为 100px，第二列的宽度为 200px 到 400px 之间，第三列的宽度为 1fr。
---------- - -------- ----- ---------------------- ----- ------------- ------ ---- ------------------- --------- ------ -
使用网格线命名
除了使用数字和单位来定义网格大小之外，还可以使用网格线命名来定义网格大小。网格线命名是一种给网格线起名字的方式，可以方便地引用这些网格线。例如，下面的代码定义了 4 个网格线，并使用这些网格线来定义列的大小。
---------- - -------- ----- ---------------------- ------------ ----- ------------ ----- ------------ --- ------------- ------------------- --------- ------ -
使用网格区域命名
网格区域命名是一种更高级的网格布局技巧，它可以让我们更方便地定义网格布局。网格区域命名可以用来给网格区域起名字，然后在网格布局中引用这些区域。例如，下面的代码定义了两个网格区域，一个叫做 header，一个叫做 main，然后使用这些区域来定义网格布局。
---------- -
-------- -----
---------------------- ----
------------------- ---- ----
--------------------
--------
-------
-
------- -
---------- -------
-
----- -
---------- -----
-总结
使用 grid-template-columns 和 grid-template-rows 可以轻松地定义网格布局的列和行的大小和数量。我们可以使用 repeat() 函数来简化代码，使用 minmax() 函数来控制网格大小的范围，使用网格线命名和网格区域命名来更方便地定义网格布局。掌握这些技巧，可以让我们更轻松地创建复杂的网格布局，提高开发效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65ffc4e8d10417a222b026b5