ie10 grid 網格佈局
網格佈局是一種新的佈局方法，該方法使你能夠基於固定數量、瀏覽器視窗中的可用空間或二者組合劃分網頁主要區域的空間。
通過將網格佈局與媒體查詢（@media）結合使用，可以使佈局無縫地適應裝置外形尺寸、方向、可用空間等因素的變化。
先給大家看一個例子，後面有屬性介紹：
這是寫完的效果圖，首先是它的結構：
<body> <div id="grid"> <!-- 結構的位置可以任意放置 --> <div id="nav" draggable="true">好吧，我是導航</div> <div id="tit">唐菜也</div> <div id="con">我是一些文字段落</div> <div id="pic"> <img id="mainphoto" alt="mainphoto" src="http://www.ibokanfamily.com/win8/grid/metro.jpg"/> </div> </div> </body>
然後是css的內容：
html,body{ height:100%; width:100%;-ms-touch-action: none;/*阻止預設動作，比如拖拽*/} #grid{ display:-ms-grid;/*定義網格佈局*/ -ms-grid-columns:200px 25px 1fr;/*定義列的數量及每列的寬度*/ -ms-grid-rows:130px 25px 1fr 25px 200px;/*定義行的數量及每行的高度，1fr代表未分配區域撐滿，詳細看屬性介紹*/ border:1px solid red; height:100%; } #tit{ -ms-grid-column:1;/*確定該元素所在列*/ -ms-grid-row:1;/*確定該元素所在行*/ background:red; } #con{ -ms-grid-column:1; -ms-grid-row:3; -ms-grid-row-span:3;/*確定該元素佔3行的高度*/ background:#999; } #pic{ -ms-grid-column:3; -ms-grid-row-span:3; -ms-grid-row:1; -ms-grid-column-align:center;/*確定該列排列方式為居中*/ -ms-grid-row-align:center;/*確定該行排列方式為居中*/ } #nav{ -ms-grid-column:3; -ms-grid-row:5; background:green; } img { height:300px; width:500px;}
將網格與媒體查詢一起使用
通過使用媒體查詢，我們可以重新定義佈局的各個方面，以便將其定製為縱向佈局。要將特定於縱向佈局的樣式新增到樣式表，應首先新增媒體查詢語法：
@media all and (orientation: portrait) { /*媒體查詢，當豎屏的時候觸發*/ }
媒體查詢的花括號之間新增縱向佈局的樣式。
網格佈局的主要屬性有:
Display:-ms-grid;首先給需要網格佈局元素的父級新增display樣式，並將其設定為-ms-grid，建立網格元素.
-ms-grid-column:integer（整數）;
該屬性標示物件元素在網格中處於第幾列。
例：如果元素在網格中的第三列可以先找到該元素（假定id名為three）並設定樣式
#three{ -ms-grid-column:3;}
Ps:該行編號系統是一個基於1的索引，1是預設的，也就是說，行編號不從零開始
-ms-grid-column-align: start | end | center | stretch(拉伸);
Start:如果物件是左對齊那麼會按照從左到右的佈局方式開始，如果是右對齊，則從右到左佈局方式開始。（預設元素都是左對齊，加了這個樣式的顯示效果類似表格中的左對齊）
End:如果是從左到右的佈局物件那麼就右對齊，如果是從右到左的佈局物件那麼就左對齊。（預設元素都是左對齊，加了這個樣式的顯示效果類似表格中的右對齊）
Center:這個元素在列的居中位置。
Stretch:拉伸，預設值，該物件被拉伸以完全填充列的寬度。
例：如果想設定元素在列的居中位置：
-ms-grid-column-align:center;
-ms-grid-columns:auto | width | min-content | max-content | minmax(min, max)+none
定義網格由幾列形成，此樣式的屬性值可以是一個或者多個列的寬度組成，用空格隔開。
Auto:預設值，由該列中最寬的子元素決定，相當於最小——最大的內容
Width:每列的寬度，除了”em”,”ex”,”px”還可以使用小數指示符（“fr”表示）組成的一個整數，例:”200px 1fr 2fr”這個的意思就是第一列被分配200個畫素，第二列被分配到1/3的剩餘寬度，第三列被分配到2/3的剩餘寬度。
Min-content:用任何子元素的最小寬度來作為該列的寬度。
Max-content:用任何子元素的最大寬度來作為該列的寬度。
Minmax(min,max)：最小和最大的行之間的寬度，允許為可用空間。
Ps:此屬性還支援重複的語法。如果有大量的列式相同的，重複語法可以應用到在一個更緊湊的形式的列，重複的值由括號括起來，並隨後由方括號[]內的整數來表示重複多少次。
例子：
-ms-grid-columns:10px 250px 10px 250px 10px 25px;
可以用:
-ms-grid-columns:(10px 250px)[3];
-ms-grid-column-span:整數;
這個物件所跨越的列數；（類似表格中合併列：colspan）;
例子：如果想讓物件佔3列的寬度:
-ms-grid-column-span:3;
-ms-grid-row:整數；
屬性值：示物件元素在網格中處於第幾行。
例：如果元素在網格中的第三行可以先找到該元素（假定id名為three）並設定樣式
#three{ -ms-grid-row:3;}
-ms-grid-row-align:start | end | center | stretch(拉伸);
Start:設定被放在頂部的行；
End:設定被放在底部的行；
Center：設定垂直居中的行；
Stretch：初始值，該物件被拉伸以完全填充行的高度。
例子：設定元素在行的居中位置：
-ms-grid-row-align:center;
-ms-grid-row-span:整數；
屬性值:這個物件所跨越的行數；（類似表格中合併列：rowspan）;
例子：如果想讓物件佔3行的高度:
-ms-grid-row-span:3;