[TOC] # 簡介 CSS在處理網頁布局方面一直做的不是很好。一開始我們用的是table（表格）布局，然后用float(浮動)，position（定位）和inline-block（行內塊）布局，但是這些方法本質上是hack，遺漏了很多功能，例如[垂直居中](http://www.w3cplus.com/blog/tags/357.html)。后來出了flexbox(盒子布局)，解決了很多布局問題，但是它僅僅是一維布局，而不是復雜的二維布局，實際上它們（flexbox與grid）能很好的配合使用。Grid布局是第一個專門為解決布局問題而創建的CSS模塊，由微軟提出，在IE10開始支持，但需要使用`-ms-`后綴（IE11+不再需要）。2012年11月06日成立草案。 ## [兼容性](http://caniuse.com/#search=grid) **目前瀏覽器還不支持Grid布局（所以現在的grid支持很渣，不能實際項目）**，IE10和IE11支持老的語法。 如果你想體驗Grid布局的強大，推薦使用開通過“體驗新功能”的Chrome, Opera 或 Firefox， 1. Chrome:打開瀏覽器，輸入`chrome://flags`，找到"experimental web platform features"，啟用并重啟瀏覽器； 2. Opera：輸入`opera://flags`，與Chrome一樣；Firefox:輸入`layout.css.grid.enabled`。 (Grid 布局正在被各大瀏覽器逐步支持～，未來會越來越好) # 視頻 Wes Bos的 https://cssgrid.io/ ## 參考 [CSS Grid 布局完全指南(圖解 Grid 詳細教程)](http://www.css88.com/archives/8510) https://css-tricks.com/almanac/properties/g/grid-row-column/