表示网格上的基准百分比：工作表

在许多 Web 应用程序中，网格布局已成为流行的布局选择。在网格布局中，元素放置在一个网格中，网格由一系列行和列组成，其中每个单元格都可以包含元素。

一个常见的需求是将元素定位到一个百分比的基准线上，这样它们的位置将随着网格的大小而变化。在这种情况下，使用网格单位而不是像素或 em 是非常有用的。

在工作表中，我们可以使用 fr 单位来表示剩余空间的比例。例如，如果我们想要一个网格布局，其中一行高度是屏幕高度的 70%，剩余的空间将分配给另一行，我们可以使用以下 CSS：

.grid-container {
  display: grid;
  grid-template-rows: 70vh 1fr;
}

这个示例将创建一个名为 grid-container 的网格容器，其中第一行的高度为视口高度（70vh），第二行的高度为剩余空间的比例（1fr）。这意味着第二行将占据剩余的 30% 空间。

我们还可以使用 repeat() 函数来定义多行或多列，从而更轻松地创建网格。例如，以下代码将创建一个具有 3 列和 4 行的网格：

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

这个示例中，我们使用 repeat() 函数来创建 3 列和 4 行，每行和每列占用相同的比例。

无论您是制作响应式网站、复杂的应用程序界面还是任何其他类型的 Web 应用程序，网格布局都是一个非常强大和灵活的工具。通过使用基于百分比的单位，您可以轻松地将元素对齐到基准百分比上，从而创建出令人满意的布局。

以上内容为 markdown 格式，示例代码片段已按 markdown 标明。