CSS3 網格布局(grid-layout)基礎知識 - 網格模板屬性(grid-template)使用說明

標籤：aqs   mct   ova   nba   menu   ipo   spm   bof   vpn   

CSS3引入了新的網格布局（grid layout）。以適應顯示和設計技術的發展（尤其是行動裝置優先的響應式設計）。

主要目標是建立一個穩定可預料且語義正確的網頁配置模式，用來替代過往表現不穩定且繁瑣的table、flow以及JS指令碼混合技術來實現的網頁動態布局。

本文將簡單而準確的介紹網格布局屬性的基本概念和用法（摘自踏得網線上HTML5教程）。

1. 概述

網格模板地區（grid-template-areas）、網格模板行（grid-template-rows）和網格模板列（grid-template-columns），這3個屬性共同顯式定義了一個網格容器。

而網格模板（grid-template）屬性是一個用來同一時候設定這3個屬性的速寫（shorthand）。 grid items內容可能會超出顯式網格，這時網格容器會自己主動產生隱式軌道（implicit track），這些隱式軌道的尺寸由 grid-auto-rows 和 grid-auto-columns 屬性所確定。

顯式網格的大小是由網格模板地區定義的行/列數以及在網格模板行/網格模板列屬性定義了尺寸的行/列數中的較大者決定的。 

不論什麼由網格模板地區定義的行或列但沒有在網格模板行/網格模板列中定義尺寸，則由grid-auto-rows或grid-auto-columns屬性來確定大小。

假設未定義顯式軌道，顯式網格依舊在每根軸線上包括一個網格線。

網格定位（grid-placement）屬性中的數字索引從顯式網格的邊緣開始計算。假設從起始側開始。索引為以1開始的正數。反之從結束側開始，則為以-1開始的負數。

2. 軌道尺寸：grid-template-rows 和 grid-template-columns

這兩個屬性用來定義一組空格分開的軌道列表（track list），軌道列表本身使用網格線名稱和軌道尺寸函數來定義。

 

軌道尺寸函數能夠是詳細的長度、相對於網格容器的百分比、按實際填充內容計算（如min-content）或者可用空間片段。

它還能夠通過minmax(min,max)函數來指定一個長度範圍。也就是介於min和max之間的一個尺寸。當中min/max參數相同能夠使用前面提到的這些尺寸定義方式。

grid-template-columns屬性指定網格列的軌道列表。而grid-template-rows屬性指定網格行的軌道列表。

3. 命名地區：grid-template-areas屬性

此屬性指定命名網格地區，該地區與不論什麼特定的網格項無關，但可在網格定位（grid-placement）屬性中引用。

網格模板地區（grid-template-areas）屬性也提供了一個可視化的網格結構。使網格容器的總體布局更easy被理解。

<string>+ 代表一系列字串。

網格模板地區屬性中每一個單獨的字串（string）定義了一個行。而字串中的每一個單元（cell）定義了一個列。

瀏覽器使用最長相符語義來把字串解析為例如以下標記（token）列表：

1. 一串名稱編碼點（name code points），代表一個命名單元標記（named cell token），其名稱由code points（即Unicode編碼空間中的字元）組成。
2. 一串單個或多個"."。代表一個空單元標記（null cell token）。
3. 一串空格（whitespace），代表不會產生不論什麼標記。

4. 其他字串，代表一個垃圾標記（trash token）。

4. 應用執行個體

上述描寫敘述嚴格但有點死板。我們還是用一個經典的響應式多列多行頁面配置執行個體來進行說明：

[ CSS代碼 ]

#page {  display: grid;  width: 100%;  height: 250px;  grid-template-areas: "head head"                       "nav  main"                       "foot ....";  grid-template-rows: 50px 1fr 30px;  grid-template-columns: 150px 1fr;}#page > header {  grid-area: head;  background-color: #8ca0ff;}#page > nav {  grid-area: nav;  background-color: #ffa08c;}#page > main {  grid-area: main;  background-color: #ffff64;}#page > footer {  grid-area: foot;  background-color: #8cffa0;}

[ HTML代碼 ]

<section id="page">  <header>Header</header>  <nav>Navigation</nav>  <main>Main area</main>  <footer>Footer</footer></section>

上述代碼通過 grid-template-areas 定義了一個3行2列的彈性布局：

1. 相鄰的2個head字串，將產生一個名為head的網格地區。跨越2列。

2. nav、main和foot字串分別產生與其同名的3個網格地區。

3. 4個點（....）連線產生一個空網格地區。

然後通過grid-template-rows定義了各行軌道高度。

第1、3行分別為50px和30px固定高度，第二行為彈性尺寸就可以用空間減去固定尺寸後根據彈性因子按比例分配的長度，

在這裡僅僅有一個彈性尺寸，且彈性因子為1，表示佔用全部剩餘空間寬度（也就是：網格容器寬度 - 50px - 30px）。

通過grid-template-columns定義了各列軌道寬度。第1列為150px固定寬度。第2列佔領水平方向的剩餘空間。

你能夠通過線上執行個體來自己測試下：http://wow.techbrood.com/fiddle/15975

【注意：網格布局相關規範仍處於Working Draft狀態，所以請在瀏覽器中進行實際測試以鑒別其相容性。】

by iefreer

CSS3 網格布局(grid-layout)基礎知識 - 網格模板屬性(grid-template)使用說明