css 网格布局_CSS网格布局Fr单元指南

CSS网格布局模块附带了一个名为fr unit的新CSS 单元 。 fr尽可能简单，是“ fraction”一词的缩写 。 新的单元可以将网格快速切成比例的列或行。 结果，创建完全响应和灵活的网格几乎变得轻而易举。

由于分数单位是与Grid Layout模块一起引入的，因此可以在支持CSS grid的任何浏览器中使用它。 如果您还想支持较旧的浏览器，这里有一个很棒的CSS网格polyfill ，它不仅可以使用fr单位，还可以使用其他网格功能。

基本用法

首先，让我们看一下使用分数单位的基本网格 。 下面的布局将空间分成三个等宽的列和两个等高的行 。

所属HTML由.wrapper div中的六个标记有.box类的div组成 。

<div class="wrapper">
  <div class="box box-1">1.</div>
  <div class="box box-2">2.</div>
  <div class="box box-3">3.</div>
  <div class="box box-4">4.</div>
  <div class="box box-5">5.</div>
  <div class="box box-6">6.</div>
</div>

要使用“网格布局”模块，您需要添加display: grid; 包装CSS属性。 grid-template-columns属性使用fr单位作为值； 三列之比为1：1：1 。

对于网格行（ grid-template-rows属性），我没有使用fr单位，因为只有包装器的高度固定时 ，它才有意义。 否则，它在某些设备上可能会产生奇怪的结果，但是即使这样， fr单位仍会保持该比率 （这是巨大的）。

grid-gap属性在框之间添加一个10px的网格 。 如果您不希望有任何差距，请删除此属性。

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 200px 200px;
  grid-gap: 10px;
}
.box {
  color: white;
  text-align: center;
  font-size: 30px;
  padding: 25px;
}

请注意，上面CSS不包含某些基本样式，例如背景色。 您可以在文章结尾的演示中找到完整的代码 。

变化率

当然，您不仅可以使用1：1：1，还可以使用任何比例 。 在下面，我使用了1：2：1的分数 ，这些分数也将空间分成三列，但中间的列将是其他两列的两倍 。

我还增加了grid-gap的值，以便您可以看到它如何更改布局。 基本上，浏览器从视口宽度中减去网格间隙（在此示例中，网格间隙总计为80px），然后根据给定的分数将其余部分切成薄片 。

.wrapper {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 200px 200px;
  grid-gap: 40px;
}

将

您也可以将 fr单位与任何其他CSS单位组合 。 例如，在下面的示例中，我为网格使用了60% 1fr 2fr比率。

那么，这是如何工作的呢？ 浏览器将视口宽度的60％分配给第一列。 然后，它将其余空间分成1：2的小数部分。

同一件事也可以写成60% 13.33333% 26.66667% 。 但坦率地说，为什么有人要使用这种格式？ 小数单元的一个巨大优势是它提高了代码的可读性 。 而且，它是完全准确的 ，因为百分比格式的总和仅为99.9999％。

.wrapper {
  display: grid;
  grid-template-columns: 60% 1fr 2fr;
  grid-template-rows: 200px 200px;
  grid-gap: 10px;
}

除百分比外， 您还可以将其他CSS单位与分数单位一起使用，例如pt ， px ， em和rem 。

用

如果您不希望设计混乱，不希望在网格中添加一些空白怎么办？ 分数单元对此也有一个简单的解决方案。

如您所见，此网格的列为空，同时仍保留所有六个框。 对于此布局，我们需要将空间切成四列而不是三列 。 因此，我们将1fr 1fr 1fr 1fr值用于grid-template-columns属性。

我们使用点表示法将空白列添加到grid-template-areas属性中。 基本上，此属性使您可以引用命名的网格区域 。 而且，您可以使用需要分别用于每个area的grid-area属性来命名网格区域 。

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 200px 200px;
  grid-gap: 10px;
  grid-template-areas:
    "box-1 box-2 . box-3"
    "box-4 box-5 . box-6";
}
.box-1 {
  grid-area: box-1;
}
.box-2 {
  grid-area: box-2;
}
.box-3 {
  grid-area: box-3;
}
.box-4 {
  grid-area: box-4;
}
.box-5 {
  grid-area: box-5;
}
.box-6 {
 grid-area: box-6;
}

空格区域不必一定要形成一列 ，它们可以在网格中的任何位置 。

您还可以将fr单位与repeat()函数一起使用 ，以简化语法 。 ，如果您只有一个简单的网格，但是在要实现复杂的布局 （例如嵌套网格）时可以派上用场，则不需要这样做 。

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* grid-template-columns: 1fr 1fr 1fr; */
  grid-template-rows: 200px;
  grid-gap: 10px;
}

repeat(3, 1fr)语法的布局与1fr 1fr 1fr 相同 。 下面的布局与第一个示例相同。

如果您在repeat()函数中增加乘数 ，则将有更多列。 例如， repeat(6, 1fr)导致六个相等的column 。 在这种情况下，我们所有的框都将在同一行中 ，这意味着对于grid-template-rows属性仅使用一个值（200px）就足够了。

.wrapper {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 200px;
  grid-gap: 10px;
}

您可以多次使用repeat() 。 例如，以下示例将生成一个网格，其中最后三列的宽度是前三列的两倍 。

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr) repeat(3, 2fr);
  grid-template-rows: 200px;
  grid-gap: 10px;
}

您还可以将repeat()与其他CSS单元结合使用 。 例如，您可以使用200px repeat(4, 1fr) 200px作为有效代码。

如果您对如何使用CSS Grid模块创建复杂的布局感兴趣，则repeat()函数和fr单元Rachel Andrew撰写了一篇有趣的博客文章， 介绍了如何做到这一点 。

实验演示

最后， 这是我承诺的演示 。 它使用与本文第一个示例相同的代码。 分叉，看看用fr装置可以实现什么。

翻译自: https://www.hongkiat.com/blog/css-grid-layout-fr-unit/