讓我們接著來看網格布局
與其他長度單位混合所產生的頁面效果
下面先放上例子
**如下：
height: 100%;
display: grid;
grid-template-columns: 1fr 200px; /* 定義乙個寬為1fr的列軌道和乙個寬為200px的列軌道 */
}.div1
.div2
two效果如圖：
我們可以看到，頁面上展示了乙個右側元素定寬，左側元素寬度自適應的布局。也就是說在樣式表中的所設定的1fr 200px作用下：不管視口寬度如何變化，第二個網格元素將始終獨佔200px的寬度，而剩下的寬度則由第乙個網格元素獨佔。這就是fr單位與其他單位結合所產生的效果。
讓我們再新增乙個動態單位vw（1vw = 視口寬度的 1/100）來看一看效果
**如下：
height: 100%;
display: grid;
grid-template-columns: 20vw 1fr 200px;/* 定義三個列軌道 寬度分別為 20vw 1fr 200px */
}.div1
.div2
.div3
twothree
效果如圖：
我們可以看到，三個網格元素的寬度依然正確的在產生變化。也就是說fr可以在與多種單位組合的情況下，正常的影響網格元素的寬高。
有關fr單位的補充暫時到這裡，如果後續還有更多的要點，我會在本篇部落格或後續部落格中再做新增。
repeat()方法可以用於網格布局屬性中grid-template-columns和grid-template-rows。也就是說，我們可以在建立網格軌道時使用repeat(),當我們需要建立大量的網格軌道時，乙個乙個在grid-template-columns和grid-template-rows裡面追加值是很不現實的行為，而repeat()方法完美的解決了這個問題。下面我將詳細介紹使用repeat()批量建立網格軌道常用的幾種方法
當我們需要建立 3個 寬度相同的 列軌道時（假設寬度都為1fr），依照之前的方式應當是：
grid-template-columns: 1fr 1fr fr;grid-template-columns: repeat(3,1fr);grid-template-columns: repeat(3,200px);非常簡單！我們只需要用追加的形式來完成（這當然要比乙個乙個追加值要快很多）
grid-template-columns: 20px repeat(6, 1fr) 20px;3.我們也可以在repeat()中使用寬度組合的方式來批量建立網格軌道
就像這樣：
grid-template-columns: repeat(5, 1fr 200px)；可以看到頁面不但達到了我們需要的效果，而且在視口寬度發生變化時也符合我們的**。
和第二種方法的使用一樣，我們可以用追加的方式自由組合三種方法來多樣化的建立網格軌道
下面來看最後乙個例子:
grid-template-columns: 200px repeat(3, 1fr 100px) repeat(2, 10px);完全符合！
至於行軌道，和列軌道作用的方式是完全一樣的，大家可以自行嘗試。
以上就是本篇部落格的全部內容。
更多關於grid layout（網格布局），敬請期待我的後續博文。
CSS3 grid layout（網格布局）（三）
讓我們接著來看網格布局 網格軌道可以使用任何長度單位進行定義。網格還引入了乙個另外乙個長度單位來幫助我們建立靈活的網格軌道，那就是fr。fr代表網格容器中可用空間的一等份，並且受其影響的網格軌道會隨著可用空間的變化增長或者收縮。fr的數量表示在行或列中可容納的網格軌道的數量，而fr值的大小則決定了網...
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單位，你還可以...