css grid layout

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)格項目


grid?

網(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)該知道哪一種更適合你的布局管毙。)


這樣的布局不少見,很容易的就可以實現(xiàn)


兼容性

兼容性


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)掏湾,再來補充本文。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末肿嘲,一起剝皮案震驚了整個濱河市融击,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌雳窟,老刑警劉巖尊浪,帶你破解...
    沈念sama閱讀 206,482評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異封救,居然都是意外死亡拇涤,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,377評論 2 382
  • 文/潘曉璐 我一進店門誉结,熙熙樓的掌柜王于貴愁眉苦臉地迎上來鹅士,“玉大人,你說我怎么就攤上這事搓彻∪绯瘢” “怎么了?”我有些...
    開封第一講書人閱讀 152,762評論 0 342
  • 文/不壞的土叔 我叫張陵旭贬,是天一觀的道長怔接。 經(jīng)常有香客問我,道長稀轨,這世上最難降的妖魔是什么扼脐? 我笑而不...
    開封第一講書人閱讀 55,273評論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上瓦侮,老公的妹妹穿的比我還像新娘艰赞。我一直安慰自己,他們只是感情好肚吏,可當我...
    茶點故事閱讀 64,289評論 5 373
  • 文/花漫 我一把揭開白布方妖。 她就那樣靜靜地躺著,像睡著了一般罚攀。 火紅的嫁衣襯著肌膚如雪党觅。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,046評論 1 285
  • 那天斋泄,我揣著相機與錄音杯瞻,去河邊找鬼。 笑死炫掐,一個胖子當著我的面吹牛魁莉,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播募胃,決...
    沈念sama閱讀 38,351評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼旗唁,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了摔认?” 一聲冷哼從身側(cè)響起逆皮,我...
    開封第一講書人閱讀 36,988評論 0 259
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎参袱,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體秽梅,經(jīng)...
    沈念sama閱讀 43,476評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡抹蚀,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,948評論 2 324
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了企垦。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片环壤。...
    茶點故事閱讀 38,064評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖钞诡,靈堂內(nèi)的尸體忽然破棺而出郑现,到底是詐尸還是另有隱情,我是刑警寧澤荧降,帶...
    沈念sama閱讀 33,712評論 4 323
  • 正文 年R本政府宣布接箫,位于F島的核電站,受9級特大地震影響朵诫,放射性物質(zhì)發(fā)生泄漏辛友。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,261評論 3 307
  • 文/蒙蒙 一剪返、第九天 我趴在偏房一處隱蔽的房頂上張望废累。 院中可真熱鬧邓梅,春花似錦、人聲如沸邑滨。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,264評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽掖看。三九已至匣距,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間乙各,已是汗流浹背墨礁。 一陣腳步聲響...
    開封第一講書人閱讀 31,486評論 1 262
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留耳峦,地道東北人恩静。 一個月前我還...
    沈念sama閱讀 45,511評論 2 354
  • 正文 我出身青樓,卻偏偏與公主長得像蹲坷,于是被迫代替她去往敵國和親驶乾。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 42,802評論 2 345

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案循签? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽?zāi)J的外補...
    _Yfling閱讀 13,728評論 1 92
  • 簡介 CSS Grid布局 (又名"網(wǎng)格")级乐,是一個基于二維網(wǎng)格布局的系統(tǒng),旨在改變我們基于網(wǎng)格設(shè)計的用戶界面方式...
    咕咚咚bells閱讀 2,486評論 0 4
  • 簡介CSS網(wǎng)格布局(又稱“網(wǎng)格”)县匠,是一種二維網(wǎng)格布局系統(tǒng)风科。CSS在處理網(wǎng)頁布局方面一直做的不是很好。一開始我們用...
    _leonlee閱讀 64,933評論 25 173
  • 前言 溫馨提示:本文較長乞旦,圖片較多贼穆,本來是想寫一篇 CSS 布局方式的,但是奈何 CSS 布局方式種類太多并且實現(xiàn)...
    sunshine小小倩閱讀 3,118評論 0 59
  • 思維導圖的矢量圖 訪問密碼 e9ed 深入討論在輸出設(shè)備上顯示二維圖形的問題 [TOC] 1. 二維觀察流水線...
    Gaolex閱讀 2,263評論 0 1