CSS Grid是一個用于網頁布局的強大工具，它可以讓我們輕松創建一些現代化的布局，其中一個重要的特性就是fr。fr代表著網格容器剩余空間的一部分，通過fr我們可以輕松設置自適應網格布局。

.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 三列，每列寬度為剩余空間的1/3 */
grid-template-rows: 1fr 2fr; /* 兩行，第一行占1/3，第二行占2/3 */
}

在上述代碼中，我們把網格容器分成了三列和兩行，并且每列的寬度是剩余空間的1/3，第一行的高度占了1/3，第二行的高度占了2/3。

除了上面使用的repeat函數外，我們還可以使用fr來控制每一行或每一列的大小，例如

.grid-container {
display: grid;
grid-template-columns: 3fr 1fr; /* 兩列，第一列占3/4，第二列占1/4 */
grid-template-rows: 1fr 1fr; /* 兩行，每行都占1/2 */
}

在上述代碼中，我們把網格容器分成了兩列和兩行，并且第一列占了3/4，第二列占了1/4，第一行和第二行都占了1/2。

總的來說，使用fr可以讓我們更加方便的控制網格容器的大小和布局，同時也可以讓我們輕松實現響應式布局，適應不同的設備和屏幕尺寸。