CSS Grid 中 - track 和 - span 的用法详解-JavaScript中文网-JavaScript教程资源分享门户

CSS Grid 是一个强大的布局工具，可以让我们更方便地实现网格布局。其中，track 和 span 是两个常用的属性，用于定义网格轨道。

track 属性

track 属性用于定义网格轨道的大小和位置。它有两种形式：grid-template-columns 和 grid-template-rows。它们分别用于定义网格布局中的列和行。

在 grid-template-columns 中，我们可以使用长度单位、百分比和 fr 单位来定义每一列的大小。例如：

.container {
  display: grid;
  grid-template-columns: 100px 1fr 2fr;
}

这个例子中，第一列的宽度是 100px，第二列的宽度是剩余空间的 1/3，第三列的宽度是剩余空间的 2/3。

在 grid-template-rows 中，同样可以使用长度单位、百分比和 fr 单位来定义每一行的大小。例如：

.container {
  display: grid;
  grid-template-rows: 100px 1fr 2fr;
}

这个例子中，第一行的高度是 100px，第二行的高度是剩余空间的 1/3，第三行的高度是剩余空间的 2/3。

此外，我们还可以使用 repeat 函数来重复相同的网格轨道。例如：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
}

这个例子中，每一列的宽度都是剩余空间的 1/3，每一行的高度都是 100px。

span 属性

span 属性用于定义网格项跨越的轨道数。它可以用于 grid-column 和 grid-row 属性中。

在 grid-column 中，我们可以使用 span 属性来定义一个网格项跨越的列数。例如：

.item {
  grid-column: 2 / span 3;
}

这个例子中，.item 跨越了从第二列开始的 3 列。

在 grid-row 中，同样可以使用 span 属性来定义一个网格项跨越的行数。例如：

.item {
  grid-row: 2 / span 3;
}

这个例子中，.item 跨越了从第二行开始的 3 行。

示例代码

下面是一个示例代码，演示了如何使用 track 和 span 属性实现网格布局。其中，我们使用了 grid-template-areas 属性来定义网格区域。

<div class="container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>

-- -------------------- ---- -------
---------- -
  -------- -----
  ---------------------- ----- ----
  ------------------- ---- --- -----
  --------------------
    ------- -------
    -------- --------
    ------- --------
-

------- -
  ---------- -------
  ----------------- -----
-

-------- -
  ---------- --------
  ----------------- -----
-

-------- -
  ---------- --------
  ----------------- -----
-

------- -
  ---------- -------
  ----------------- -----
-

这个例子中，我们将整个布局划分为了三行和两列。第一行是自适应高度，第二行和第三行的高度都是剩余空间的 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