讓我們接著來看網格布局
網格軌道可以使用任何長度單位進行定義。 網格還引入了乙個另外乙個長度單位來幫助我們建立靈活的網格軌道，那就是fr。fr代表網格容器中可用空間的一等份，並且受其影響的網格軌道會隨著可用空間的變化增長或者收縮。fr的數量表示在行或列中可容納的網格軌道的數量，而fr值的大小則決定了網格軌道所佔的比例，如下的幾個例子將詳細解釋 。
請看如下**
border: 1px solid;
background-color: violet;
}display: grid;
border: 1px solid;
grid-template-columns: 1fr;/* 定義乙個寬度為1fr的列軌道 */
}two
我們可以發現這是乙個兩行一列的網格容器，當中含有兩個網格元素，並且兩個網格元素的寬度各占滿了一整列的大小，正如我對fr解釋所述，在grid-template-columns中只寫了乙個fr值，代表在當前網格容器中，只存在乙個列軌道。既然只存在乙個列軌道，那麼fr的值也就不重要了，因為無論fr值大還是小，**元素的寬度都將覆蓋整列。
那麼再新增乙個fr值會是什麼效果呢？
border: 1px solid;
background-color: violet;
}display: grid;
border: 1px solid;
grid-template-columns: 1fr 1fr; /* 定義兩個寬度為1fr的列軌道 */
}效果如圖：
我們可以看到，此時網格容器是乙個一行兩列的布局，當中網格元素的寬度比例為1:1。這是因為我在
grid-template-columns上設定了兩個fr，並且值的大小均為1；兩個fr滿足兩列，而值的大小均為1則滿足了寬度比例為1:1。
現在讓我來將第二個fr的值的大小改為2 再來看看效果。
不出所料，由於依然存在兩個fr，所以布局仍是一行兩列。又因為第二個fr的值此時為2，所以，兩個列軌道的寬度比例為1:2（並且在不同視口寬度下也是如此，大家可以自行調整瀏覽器寬度嘗試）
接下來，我在網格容器中再追加乙個網格元素，讓我們來看看在網格軌道的數量小於網格元素時，fr會產生什麼樣的效果，修改後的html如下（css樣式不變，依然是1fr 2fr）；
twothree
效果如圖
如圖，由於網格容器中只存在兩個網格軌道，在同一行中無法放置三個網格元素，所以布局變成了兩行兩列。比例仍維持1：2。
最後讓我們再來測試一下當網格軌道的數量多於網格元素時的效果，修改後的**如下：
border: 1px solid;
background-color: violet;
}display: grid;
border: 1px solid;
grid-template-columns: 1fr 2fr 3fr 4fr; /* 定義四個列軌道，寬度佔比分別為 1 2 3 4*/
}twothree
效果如圖：
如圖，由於網格軌道數量多於網格元素，所以只需一行即可容納三個網格元素，並且比值也符合設定的1:2:3；並且沒有網格元素的第四列軌道的佔比也為4。
行軌道作用的形式與列軌道是一樣的。在此，我只將列軌道的最後乙個例子稍作修改，以展示fr作用在行軌道上的樣式，其餘大家可自行探索。
讓我們將最後乙個例子中的grid-template-columns屬性變為grid-template-rows，其餘保持不變；
**如下
border: 1px solid;
background-color: violet;
}display: grid;
border: 1px solid;
grid-template-rows: 1fr 2fr 3fr 4fr; /* 定義四個行軌道，寬度佔比分別為 1 2 3 4*/
}效果如圖
參照我最後乙個例子的解釋，大家可以自行在行軌道上來嘗試和理解fr單位，本篇部落格不在贅述。
有關fr單位的補充和更多關於grid layout（網格布局），敬請期待我的後續博文。
CSS3 grid layout（網格布局）（四）
讓我們接著來看網格布局 與其他長度單位混合所產生的頁面效果 下面先放上例子 如下 height 100 display grid grid template columns 1fr 200px 定義乙個寬為1fr的列軌道和乙個寬為200px的列軌道 div1 div2 two效果如圖 我們可以看到，...
css3網格布局
網格布局是flex的公升級版 父級屬性display grid 即可把這個div變成網格 父級屬性grid template columns 20 20 20 20 設定有多少列，每列有多寬。auto自動填 1fr 2fr 設定比例倍數 父級屬性grid template rows 200px 20...
CSS3 邊框 慕課網 學習總結
border radius是向元素新增圓角邊框。使用方法 border radius 10px 所有角都使用半徑為10px的圓角 border radius 5px 4px 3px 2px 四個半徑值分別是左上角 右上角 右下角和左下角，順時針 border radius的值只能用px單位，你還可以...