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