目標

此篇介紹格線佈局中的 fr 此單位的使用，以及如何使用此單位來填滿格線佈局

Demo | Github

首先，來個預定情境如下，使用百分比來設定，但是由於設定了 gap 所以會造成設定溢出

.container {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 25% 25% 25% 25%;
}

加上邊框來觀察會更明顯

.container {
    display: grid;
    grid-gap: 20px;
    border: 10px solid var(--yellow);
    grid-template-columns: 25% 25% 25% 25%;
}

這時候可以使用 fr 單位，此單位會自動計算表格中剩餘可以使用的空間，然後分配

.container {
    display: grid;
    grid-gap: 20px;
    border: 10px solid var(--yellow);
    grid-template-columns: 2fr 1fr 2fr 1fr;
}

當然，除了 grid-template-columns 外，在 grid-template-rows 也可以使用 fr 單位；而另一個 auto 的設定則是會依照內容的大小去自動調整表格大小，可以觀看如下範例

.container {
    display: grid;
    grid-gap: 20px;
    border: 10px solid var(--yellow);
    grid-template-columns: auto 1fr auto 1fr;

筆記與備註事項

Tracks can be defined using any length unit.
資料來源 - MDN