CSS Grid 是一个强大的布局工具，可以让我们更方便地实现网格布局。其中，track 和 span 是两个常用的属性，用于定义网格轨道。
track 属性
track 属性用于定义网格轨道的大小和位置。它有两种形式：grid-template-columns 和 grid-template-rows。它们分别用于定义网格布局中的列和行。
在 grid-template-columns 中，我们可以使用长度单位、百分比和 fr 单位来定义每一列的大小。例如：
---------- - -------- ----- ---------------------- ----- --- ---- -
这个例子中，第一列的宽度是 100px，第二列的宽度是剩余空间的 1/3，第三列的宽度是剩余空间的 2/3。
在 grid-template-rows 中，同样可以使用长度单位、百分比和 fr 单位来定义每一行的大小。例如：
---------- - -------- ----- ------------------- ----- --- ---- -
这个例子中，第一行的高度是 100px，第二行的高度是剩余空间的 1/3，第三行的高度是剩余空间的 2/3。
此外，我们还可以使用 repeat 函数来重复相同的网格轨道。例如：
---------- - -------- ----- ---------------------- --------- ----- ------------------- --------- ------- -
这个例子中，每一列的宽度都是剩余空间的 1/3，每一行的高度都是 100px。
span 属性
span 属性用于定义网格项跨越的轨道数。它可以用于 grid-column 和 grid-row 属性中。
在 grid-column 中，我们可以使用 span 属性来定义一个网格项跨越的列数。例如：
----- - ------------ - - ---- -- -
这个例子中，.item 跨越了从第二列开始的 3 列。
在 grid-row 中，同样可以使用 span 属性来定义一个网格项跨越的行数。例如：
----- - --------- - - ---- -- -
这个例子中，.item 跨越了从第二行开始的 3 行。
示例代码
下面是一个示例代码，演示了如何使用 track 和 span 属性实现网格布局。其中，我们使用了 grid-template-areas 属性来定义网格区域。
---- ------------------ ---- --------------------------- ---- ----------------------------- ---- ----------------------------- ---- --------------------------- ------
---------- -
-------- -----
---------------------- ----- ----
------------------- ---- --- -----
--------------------
------- -------
-------- --------
------- --------
-
------- -
---------- -------
----------------- -----
-
-------- -
---------- --------
----------------- -----
-
-------- -
---------- --------
----------------- -----
-
------- -
---------- -------
----------------- -----
-这个例子中，我们将整个布局划分为了三行和两列。第一行是自适应高度，第二行和第三行的高度都是剩余空间的 1/2。第一列宽度固定为 200px，第二列的宽度是剩余空间的 1/2。
我们使用 grid-template-areas 属性来定义网格区域。.header 对应的区域为 header，.sidebar 和 .content 同时跨越了两行，对应的区域为 sidebar 和 content，.footer 对应的区域为 footer。
总结
在 CSS Grid 中，track 和 span 是两个常用的属性，用于定义网格轨道和网格项跨越的轨道数。掌握这些属性的用法，可以更方便地实现网格布局。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/646ec06c968c7c53b0d13bcf