CSS Grid布局 （又名"網格"），是一個基於二維網格布局的系統，主要目的是改變我們基於網格設計的用戶接口方式。你只需要定義一個容器元素並設置display：grid，使用grid-template-columns 和 grid-template-rows屬性設置網格的列與 行的大小，然后使用grid-column 和 grid-row屬性將其子元素放入網格之中。目前還處於 W3C 的工作草案之中，並且默認情況下，還不被所有的瀏覽器所支持。出於示例演示，建議你使用啟用了特殊標志的 Chrome, Opera 或者 Firefox，現在介紹chrome瀏覽器開啟示例功能；
可以直接在瀏覽器地址欄中輸入網址：chrome://flags#enable-experimental-web-platform-features 立馬定位需要的選項，然后點擊“啟用”(enable)按鈕，然后重啟瀏覽器即可。如下圖：
下面是一個Grid布局的示例源碼。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 6 <style> 7 * {margin: 0;padding: 0;} 8 html,body {width: 100%;height: 100%;} 9 .container { 10 display: grid; 11 grid-template-columns: 33.333333% 33.333333% 33.333333%; 12 grid-template-rows: auto; 13 } 14 .item { 15 background-color: #444; 16 color: #fff; 17 font-size: 150%; 18 padding: 20px; 19 margin: 3.333333%; 20 } 21 .item-5 { 22 grid-column-start: 2; 23 grid-column-end: 4; 24 grid-row-start: 2; 25 grid-row-end: 4; 26 } 27 .item-7 { 28 grid-column-start: 1; 29 grid-column-end: 3; 30 grid-row-start: 4; 31 grid-row-end: 4; 32 } 33 .item-12 { 34 grid-column-start: 1; 35 grid-column-end: 4; 36 grid-row-start: 6; 37 grid-row-end: 6; 38 } 39 </style> 40 </head> 41 <body> 42 43 <div class="container"> 44 <div class="item item-1">1</div> 45 <div class="item item-2">2</div> 46 <div class="item item-3">3</div> 47 <div class="item item-4">4</div> 48 <div class="item item-5">5</div> 49 <div class="item item-6">6</div> 50 <div class="item item-7">7</div> 51 <div class="item item-8">8</div> 52 <div class="item item-9">9</div> 53 <div class="item item-10">10</div> 54 <div class="item item-11">11</div> 55 <div class="item item-12">12</div> 56 </div> 57 58 </body> 59 </html>
預覽效果如下：
