卡卡網(wǎng)

在使用CSS Grid的時候，它用了一個新的單位：fr，很多人不了解它的意思，本文將通過實例來介紹一下這個單位：fr，以及如何使用它。

fr 是分數(shù)單位，1fr是可用空間的 1 部分。下面是關(guān)于fr單位在使用中的幾個例子。這些示例中的網(wǎng)格項目放置在帶有網(wǎng)格區(qū)域的網(wǎng)格上。

.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 列每列占用相同的空間。

使用 fr 的示例

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

.container {
  /* ... */

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

  /* ... */
}

在下面的最后一個示例中，側(cè)邊欄項目覆蓋 2fr，因此它將與跨越第一列和第二列的項目具有相同的寬度：

.container {
  /* ... */

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

  /* ... */
}

混合單位

正如在前面的示例中看到的，可以混合fr具有固定值和百分比值的值。這fr值將在其他值占用后剩余的空間之間進行劃分。

例如，如果你有一個 4 列的網(wǎng)格，如以下代碼片段所示，第一列將是 300 像素，第二列是 80 像素（800 像素的 10%），第三和第四列將是 210 像素（各占剩余空間的一半)：

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

  grid-template-rows: auto;
}

CSS長度單位 fr 簡介：1fr 的意思

在 CSS Grid 網(wǎng)格布局中，引入了一種新的長度單位 fr(fraction)。它表示 Grid 布局中中剩余空間(leftover space)的一部分(fraction)。

一般來說 1fr 的意思是“100%的剩余空間”, .25fr 意味著“25%的剩余空間”。當 fr 大于 1 的時候，則會重新計算比例來分配。我們可以看下面的詳細例子。

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 四塊進行均分，我們可以用 grid-template-columns: repeat(4, 1fr) ，效果與 grid-template-columns: repeat(4, .25fr) 是一樣的。.25 來自于 100%/4=25%。

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

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

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

 2、和其他單位混合使用

在 Grid 布局中，有時候我們需要固定某些列的長度，可以用以下方法，這里 A 和 D 都是固定的 50px，C 是占總寬度的 20%，剩余空間就可以分配給 B。

這種情況，在設(shè)計響應(yīng)式布局的時候非常有用。

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

總結(jié)

在定義網(wǎng)格時，fr 的用法與其他 CSS 長度單位 %、px、em 等是一樣的。理解它的使用特征，可以更靈活的應(yīng)用在自適應(yīng)網(wǎng)頁設(shè)計上。

相關(guān)文章

• 【示例】使用CSS Grid輕松實現(xiàn)模塊列表布局(響應(yīng)式)
• CSS Grid 和 CSS Flexbox 的區(qū)別

標簽: Grid