CSS网格布局：Fr单位

介绍

使用 CSS 网格布局，我们得到了一个新的灵活单元：Fr 单元。 Fr 是小数单位，1fr 是可用空间的 1 部分。以下是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 列每列占用相同的空间。

头

头 2

主要的

主要 2

边

页脚

使用 fr 的示例

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

.container {
  /* ... */

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

  /* ... */
}

头

头 2

主要的

主要 2

边

页脚

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

.container {
  /* ... */

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

  /* ... */
}

头

头 2

主要的

主要 2

边

页脚

混合单位

正如您在前面的示例中看到的，您可以将 fr 值与固定值和百分比值混合使用。 fr 值将在其他值占用后剩余的空间之间进行划分。

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

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

  grid-template-rows: auto;
}