為什麽我們需要grid布局？

在web發展過程中，誕生了很多精妙的布局方式。

在web 1.0時代，網頁只負責靜態地展示文字和圖片等簡單信息，當時流行的是table布局，table布局能夠輕而易舉地對齊頁面內容，而且能兼容各大瀏覽器。但其也有很大但缺點：1. table用作布局，而不是展示表格數據，使得html語義不明確；2. 要花較大的經歷去修改頁面內容，比如加一列，就需要修改table每一行html或css，增加維護成本；3. 很難做響應式。

後來css技術壯大，流行趨勢轉向div+css布局，通過設置css的position，float，margin等屬性，實現想要的布局，並通過float或百分比等技術實現響應式。div+css布局更符合html語義，維護起來也相對簡單，但缺點是垂直居中實現起來很繁瑣，而且瀏覽器兼容計較麻煩。

css3出來後，包括當下，最流行的是flex布局，flex布局簡單靈活，能輕松實現列的等距等寬，垂直居中等對齊問題，並且flex屬性能輕松構造響應式網站，尤其是IE和chrome表現基本一致，喜大普奔！但使用中發現flex使用起來還有點雞肋，flex布局只能做一行或一列上的布局，在實操中往往需要很多父元素去改變flexDirection，以實現二維布局。

那有沒有一種布局能彌補flex的缺陷呢？

那肯定是有的，就是grid布局。

什麽是grid布局？

css grid layout是一項css技術，它能夠幫助開發者簡單地構建一個復雜的響應式的網頁布局。

grid布局的核心思想是，用橫線和豎線將目標元素分成大小各異的格子，再指明子元素在橫向和縱向上的起始點，將子元素的內容填充到某個單元格或幾個單元格中。

can I use中grid的瀏覽器兼容性如圖

相對來說，grid對瀏覽器要求還有偏高，這也是grid相對其他布局，很少投入商用的重要原因。

Grid布局是怎麽解決二維布局問題的呢？

解決方案可以參考grid布局教程，這裏不作贅述，資源可參考：

CSS Grid Layout Module Level 1

https://www.w3.org/TR/css-grid-1/

CSS Grid Layout – Mozilla Developer Network

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

Grid by Example – Rachel Andrew

https://gridbyexample.com/examples/

css grid layout簡介