簡(jiǎn)介
在 CSS Grid 網(wǎng)格布局中疫衩，引入了一種新的長(zhǎng)度單位 fr(fraction)钮呀。它表示 Grid 布局中中剩余空間(leftover space)的一部分(fraction)扛邑。
一般來(lái)說(shuō) 1fr 的意思是“100%的剩余空間”, .25fr 意味著“25%的剩余空間”怜浅。當(dāng)時(shí)當(dāng) fr 大于 1 的時(shí)候，則會(huì)重新計(jì)算比例來(lái)分配蔬崩。我們可以看下面的詳細(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 來(lái)自于 100%/4=25%跨琳。
一般都建議使用 fr>=1 的情況, 比如說(shuō) 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
