前面的話
Grid布局方式借鑒了平面裝幀設計中的格線系統(tǒng)，將格線運用在屏幕上，而不再是單一的靜態(tài)頁面，可以稱之為真正的柵格。本文將詳細介紹grid布局
引入
對于Web開發(fā)者來說，網頁布局一直是個比較重要的問題。但實際上，在網頁開發(fā)很長的一段時間當中，我們甚至沒有一個比較完整的布局模塊?？偟膩碚f Web 布局經歷了以下四個階段：
1、table表格布局，通過 Dreamweaver 拖拽表格或者手寫 table 標簽布局
2、float浮動及position定位布局，借助元素元素盒模型本身的特性以及 float position 等屬性等進行布局
3、flex彈性盒模型布局，革命性的突破，解決傳統(tǒng)布局方案上的三大痛點 排列方向、對齊方式，自適應尺寸。是目前最為成熟和強大的布局方案
4、grid柵格布局，二維布局模塊，具有強大的內容尺寸和定位能力，適合需要在兩個維度上對齊內容的布局
Grid Layout 是一種基于二維網格的布局系統(tǒng)，旨在完全改變我們設計基于網格的用戶界面的方式，彌補網頁開發(fā)在二維布局能力上的缺陷
與flex分為伸縮容器和伸縮項目類似，grid也分為網格容器和網格項目
網格容器
display
通過display屬性設置屬性值為grid或inlin
