Css Grid fr单位

2019年02月28日发布阅读(3969) 作者：Jerman

随着CSS Grid的所有兴起，我没有看到关于 fr新单位（ CSS长度单元）（这里是规范）的讨论。现在浏览器支持正在迅速改进这个功能，我认为现在是时候探索它如何与我们花哨的新布局引擎一起使用，因为使用它时有很多好处; 更易读和可维护的代码是进行切换的主要原因。

首先，让我们来看看我们通常如何考虑在CSS中构建网格。在下面的示例中，我们创建了一个四列网格，其中每列的宽度相等：

<div class="grid">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>

.grid {
  display: grid;
  grid-template-columns: repeat(4, 25%);
  grid-column-gap: 10px;
}

如果您从未 repeat() 在该 grid-template-columns 属性之后看过该函数，那么让我向您介绍CSS Grid的最新功能之一！它本质上是一种简写，允许我们更简洁地描述重复值。我们本来可以编写 grid-template-columns: 25% 25% 25% 25%; ，但它使用更清晰 repeat() ，特别是当你有更冗长的宽度（如 minmax() 表达式）时。

语法基本上是这样的：

repeat(number of columns/rows, the column width we want);

然而，到目前为止我们所做的事实上存在一些问题。

首先，为了使用这个简洁的CSS函数，我们不得不做一点点数学运算。我们必须自己思考 网格的总宽度（100％）除以我们想要的列数（4） ，这使我们达到25％。在这种情况下，数学非常简单，所以我们不必担心它，但在更复杂的例子中，我们可以完全避免进行数学计算，让浏览器为我们解决这个问题。我们确实可以 calc() 使用，所以我们可以做到 repeat(4, calc(100% / 4) ，但即使这有点奇怪，无论如何还有另一个问题……

第二个问题是溢出问题。因为我们将每列设置为25％和10 grid-column-gap 到10px，然后将网格元素推 到100％以上 。通过查看上面的代码，你不希望事情发生，但这就是百分比的工作方式。我们在上面的代码中真正说的是“将每列设置为视口宽度的25％，并且它们之间有10px的间隙。” 这是一个微妙的差异，但它导致布局的一个大问题。

我们无意中在这里引起了一些水平滚动：

这是该 fr 单位可以帮助我们的地方。

所述 fr 单元（一个“部分”）可以定义网格像任何其他时使用 CSS长度如 % ， px 或 em 。让我们快速重构上面的代码来使用这个特殊的新值：

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 10px;
}

这看起来与上面的示例完全相同，因为在这个例子中我们将四列中的每一列设置为一个分数（恰好是1/4或25％）。但！ x轴上没有溢出因为将每列设置为1fr会自动考虑该10px并从每列可用的总宽度中减去它。

为什么我应该学习如何使用这个花哨的新CSS长度，如果我可以大多坚持百分比或像素的单位，你想知道吗？好吧，让我们深入研究一个更复杂的CSS Grid示例来解释为什么 fr 它是更好的选择。在一个新的例子中，假设我们想要在左侧导航，然后是十二列网格，它应该如下所示：

对于许多UI而言，这是一个非常典型的场景，因此使用该 fr 单元可以防止我们制作单独的网格div或者使用calc来摸索。因为如果我们没有 fr 在上面的例子中使用，那么我们必须弄清楚以下内容：

the width of each column = ((width of viewport - width of nav) / number of columns) * 1%

这是可能的，这是非常痛苦的阅读，如果我们改变导航的宽度，那么我们必须重新做那个愚蠢的计算。相反，该 fr 单元将所有这些整理成一个超级可读的代码行：

.grid {
  display: grid;
  grid-template-columns: 250px repeat(12, 1fr);
  grid-column-gap: 10px;
}

我们在这里做的是为第一列设置一个固定的宽度（以像素为单位），然后创建十二个单独的列，这些列设置在一个“自由空间的一小部分”（字面意思是spec的短语）。但是没有疯狂的计算或任何东西！它是超级可读的，如果左侧导航的宽度发生变化，那么右侧列的宽度将自动调整。

通过一些小小的工作，我们已经使我们的界面在未来更加可维护，并且我们确保我们的代码对于即将到来的下一代开发人员更加清晰。

原文：https://css-tricks.com/introduction-fr-css-unit

参考

https://alligator.io/css/css-grid-layout-fr-unit/
https://www.w3cplus.com/css/css-grid-fr-unit.html

Css

目录

Css Grid fr单位

参考