介绍

通过 CSS 网格布局，我们获得了一个新的灵活单位：Fr 单位。Fr 是一个小数单位，1fr是可用空间的一部分。以下是fr 单元工作的几个例子。这些示例中的网格项放置在带有网格区域的网格上。

.container {
  display: grid;

  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 100px 200px 100px;

  grid-template-areas:
        "head head2 . side"
        "main main2 . side"
        "footer footer footer footer";
}

4 列每列占用相同的空间。

使用 fr 的示例

这是上面相同的示例，具有不同的fr值。注意布局的变化：

.container {
  /* ... */

  grid-template-columns: 1fr 1fr 40px 20%;
  grid-template-rows: 100px 200px 100px;

  /* ... */
}

在下面的最后一个示例中，侧边栏项目覆盖 2fr，因此它将与跨越第一列和第二列的项目具有相同的宽度：

.container {
  /* ... */

  grid-template-columns: 1fr 1fr 40px 2fr;
  grid-template-rows: 100px 200px 100px;

  /* ... */
}

混合单位

正如您在前面的示例中看到的，您可以将fr值与固定值和百分比值混合使用。该FR值将那正是采取其他值后留下的空间之间进行划分。

例如，如果您有一个包含 4 列的网格，如下面的代码片段所示，第一列将是 300px，第二列是 80px（800px 的 10%），第三列和第四列将是 210px（每列都占据剩余空间的一半） )：

main {
  width: 800px;
  display: grid;
  grid-template-columns: 300px 10% 1fr 1fr;
  /* 300px 80px 210px 210px */

  grid-template-rows: auto;
}