2017嗓蘑,新年伊始须肆,做點新的事情拆宛,那先從簡單的開始吧羹铅,瞄準了css grid layout;
目前WEB布局的方式:
1蛤肌、文檔流业簿,流式布局
2瘤礁、 浮動布局
3、 定位
未來可能最理想的布局方式:
1梅尤、Flexbox (https://drafts.csswg.org/css-flexbox) 伸縮布局
2、CSS Grid Layout (https://drafts.csswg.org/css-grid) 網(wǎng)格布局
3岩调、Box Alignment (https://drafts.csswg.org/css-align)
CSS Grid Layout 發(fā)展過程
2010年由微軟提出巷燥,最早在IE10實施
2011年4月首次公開草案
2015年3月2日Chrome支持
2016年9月29日成為W3C候選標準
Grid?
網(wǎng)格布局可以用這個模塊實現(xiàn)許多不同的布局。網(wǎng)絡(luò)布局可以將應(yīng)用程序分割成不同的空間号枕,或者定義他們的大小缰揪、位置以及層級。
就像表格一樣葱淳,網(wǎng)格布局可以讓Web設(shè)計師根據(jù)元素按列或行對齊排列钝腺,但他和表格不同,網(wǎng)格布局沒有內(nèi)容結(jié)構(gòu)赞厕,從布使各種布局不可能與表格一樣艳狐。例如,一個網(wǎng)格布局中的子元素都可以定位自己的位置皿桑,這樣他們可以重疊和類似元素定位毫目。
此外,沒有內(nèi)容結(jié)構(gòu)的網(wǎng)格布局有助于使用流體诲侮、調(diào)整順序等技術(shù)管理或更改布局镀虐。通過結(jié)合CSS的媒體查詢屬性,可以控制網(wǎng)格布局容器和他們的子元素沟绪,使用頁面的布局根據(jù)不同的設(shè)備和可用空間調(diào)整元素的顯示風格與定位刮便,而不需要去改變文檔結(jié)構(gòu)的本質(zhì)內(nèi)容。
網(wǎng)格容器和網(wǎng)格項目
網(wǎng)格線
grid-template-columns / grid-template-rows;
網(wǎng)格間距 (grid-gap;)
FLEXBOX OR GRID?
Flexbox Layout定義一個維度绽慈,行或者列恨旱;(一維布局)
Grid Layout定義兩個維度抄肖,行和列;(二維布局窖杀,你可以根據(jù)你的設(shè)計需求漓摩,將內(nèi)容區(qū)塊放置到任何你想要放的地方。那么不用多說入客,你應(yīng)該知道哪一種更適合你的布局管毙。)
兼容性
caniuse眾觀下來桌硫,僅在IE10+上支持夭咬,而且也僅支持部分屬性;
相關(guān)資料:
Grid規(guī)范:https://www.w3.org/TR/css-grid-1
Box Alignment規(guī)范:https://www.w3.org/TR/css-align-3
Flexbox規(guī)范:https://www.w3.org/TR/css-flexbox-1
Flexbox教程:http://www.w3cplus.com/blog/tags/157.html
Grid教程:http://www.w3cplus.com/blog/tags/355.html
Grid案例:http://codepen.io/collection/XmZoNW
Github:https://github.com/airen/grid-layout
Grid更多資源: http://gridbyexample.com/ ?
未完……
先做一個小鋪墊铆隘,之后待我研究網(wǎng)格線卓舵、網(wǎng)格軌道、網(wǎng)格單元格膀钠、網(wǎng)格區(qū)域和網(wǎng)格容器等等一些相關(guān)掏湾,再來補充本文。