前面的話

　　Grid布局方式借鑒了平面裝幀設(shè)計(jì)中的格線系統(tǒng)，將格線運(yùn)用在屏幕上，而不再是單一的靜態(tài)頁(yè)面，可以稱之為真正的柵格。本文將詳細(xì)介紹grid布局

 

引入

　　對(duì)于Web開(kāi)發(fā)者來(lái)說(shuō)，網(wǎng)頁(yè)布局一直是個(gè)比較重要的問(wèn)題。但實(shí)際上，在網(wǎng)頁(yè)開(kāi)發(fā)很長(zhǎng)的一段時(shí)間當(dāng)中，我們甚至沒(méi)有一個(gè)比較完整的布局模塊。總的來(lái)說(shuō) Web 布局經(jīng)歷了以下四個(gè)階段：

　　1、table表格布局，通過(guò) Dreamweaver 拖拽表格或者手寫 table 標(biāo)簽布局

　　2、float浮動(dòng)及position定位布局，借助元素元素盒模型本身的特性以及 float position 等屬性等進(jìn)行布局

　　3、flex彈性盒模型布局，革命性的突破，解決傳統(tǒng)布局方案上的三大痛點(diǎn) 排列方向、對(duì)齊方式，自適應(yīng)尺寸。是目前最為成熟和強(qiáng)大的布局方案

　　4、grid柵格布局，二維布局模塊，具有強(qiáng)大的內(nèi)容尺寸和定位能力，適合需要在兩個(gè)維度上對(duì)齊內(nèi)容的布局

　　Grid Layout 是一種基于二維網(wǎng)格的布局系統(tǒng)，旨在完全改變我們?cè)O(shè)計(jì)基于網(wǎng)格的用戶界面的方式，彌補(bǔ)網(wǎng)頁(yè)開(kāi)發(fā)在二維布局能力上的缺陷

　　與flex分為伸縮容器和伸縮項(xiàng)目類似，grid也分為網(wǎng)格容器和網(wǎng)格項(xiàng)目

 

網(wǎng)格容器

display

　　通過(guò)display屬性設(shè)置屬性值為grid或inlin