簡(jiǎn)介

在 CSS Grid 網(wǎng)格布局中，引入了一種新的長(zhǎng)度單位 fr(fraction)。它表示 Grid 布局中中剩余空間(leftover space)的一部分(fraction)。
一般來說 1fr 的意思是“100%的剩余空間”, .25fr 意味著“25%的剩余空間”。當(dāng)時(shí)當(dāng) fr 大于 1 的時(shí)候，則會(huì)重新計(jì)算比例來分配。我們可以看下面的詳細(xì)例子。

用法

1. 均分剩余空間

首先我們先建立如下的網(wǎng)格布局

<div class="grid-container">
  <div class="A">A</div>
  <div class="B">B</div>
  <div class="C">C</div>
  <div class="D">D</div>
</div>

然后將 ABCD 四塊進(jìn)行均分，我們可以用 grid-template-columns: repeat(4, 1fr) 這里的和 grid-template-columns: repeat(4, .25fr) 效果是一樣的。.25 來自于 100%/4=25%。

一般都建議使用 fr>=1 的情況, 比如說 1fr 2fr 就比 .33fr .67fr 可讀性更強(qiáng)。

實(shí)現(xiàn)效果如下：

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

css-fr.png

2. 和其他單位混合使用

在 grid 布局中，有時(shí)候我們需要固定某些列的長(zhǎng)度，可以用以下方法，這里 A 和 D 都是固定的 50px，C 是占總寬度的 20%，剩余空間就可以分配給 B。
這種情況，在設(shè)計(jì)響應(yīng)式布局的時(shí)候非常有用。

.grid-container {
  grid-template-columns: 50px 1fr 20% 50px;
  column-gap: 10px;
}

css-fr-mix.png