阿里巴巴前端技术专家大漠——CSS Grid Layout

2020-02-27 859浏览

  • 1.CSS Grid Layout 2016-12-17 @大漠 . #CSSConfhttps://www.flickr.com/photos/19139526@N00/8331063530/
  • 2.大漠 伪前端，就职于淘宝
  • 3.
  • 4.古老的table布局
  • 5.
  • 6.现代Web布局 Float inline-blockdisplay:table position (absolute 或 relative) Frameworks(很多Frameworks)
  • 7.希望的Web布局 Flexbox (https://drafts.csswg.org/css-flexbox)CSS Grid Layout (https://drafts.csswg.org/css-grid)Box Alignment (https://drafts.csswg.org/css-align)
  • 8.CSS Grid System
  • 9.http://960.gs/
  • 10.Grid System
  • 11.Grid 计算公式 固定网格计算 cs = 1 => cw = (scw *网c格s)容+器(总m *宽(度cs 1–1801)) = 80 * 1 + 20 * (1 - 1) = 80 cs = 2 => cw = (scw *网c格s)间+距(mm *= (2c0s – 1)) = 80 * 2 + 20 * (2 - 1) = 180 cs = 3 => cw s=c(wsc=w *(网容c格s器)列+宽数(度mmc*–=(c1s2(m–*1)()mc= 8–0 *13))+) 2/0 *mc(3 - 1) = 280 cs = 4 => cw c=w(s=cw(*sccws)*+ c(sm)*+(c(sm–* 1()c)s=–80 1*)4) + 20 * (4 - 1) = 380 cs = 5 => cw = (scw * cs) + (m * (cs – 1)) = 80 * 5 + 20 * (5 - 1) = 480 cs = 6 => cw = (scw * cs) + (m * (cs – 1)) = 80 * 6 + 20 * (6 - 1) = 580 cs = 7 => cw = (ssccww*=c(s容) +器(宽m度* (–cs (–m *1)()mc= –80 1*))7) +/ 2m0c * (7 - 1) = 680 cs = 8 => cw s=c(ws：sccw指w*=的c(s是1)1单+80(列m- 宽*(2(度0cs* –(121)-) 1=))8)0 /* 182 + 20 * (8 - 1) = 780 cs = 9 => cw m=：(s指sccw的w*=是c8s列0) 间+ (距m * (cs – 1)) = 80 * 9 + 20 * (9 - 1) = 880 cs = 10 => cwmc=：(cs最wcw大=* 列(css数c)w+（*(一mcs般*)(是c+s1(2–m）1*))(c=s8–0 * 11)0)+ 20 * (10 - 1) = 980 cs cs = = 11 12 => => ccwwcw==：((ss列ccww宽** 度ccss)) + + (m (m * * (cs (cs – – 1)) 1)) = = 80 80 * * 11 12 + + 20 20 * * (11 (12 - 1) 1) = = 1080 1180 cs：列数(1~12)
  • 12.[class*="m--"]{padding-right:$gutter;padding-left:$gutter; @for $i from 1 through 12 { &.m--#{$i} {width:(80 * $i + 20 * ($i - 1)) * 1px; } } }http://codepen.io/airen/full/rMEggR/
  • 13.Grid 计算公式 cs cs cs = = = 1 2 3 => => => cw cw cw = = = (scw (scw (scw * * * cs) + cs) + css)cw+ (((网网=mmm ***格格(1(((间容ccc0sss0器距–––% m总111–)))流)))宽= ===(度1体m666....6888网*6661%6660666(格0777m%%%%c***计123–算+++ 1111...)666%%%))*** (1 (2 (/3 - 1) - 1) -mc1) = = = 6.86667% 15.33333% 23.8% cs = 4 => cw = (scw * cs) + (网m *格(列cs 数– m1c)) == 61.286667% * 4 + 1.6% * (4 - 1) = 32.26667% cs cs = = 5 6 => => cw cw = = (scw (scw * * ccssc))w++ =((mm **(s((cccssw––*11))c)) s==)66..+886666(6677m%% ***65 (++c11s..66%%–** ((561)-- )11)) = = 40.73333% 49.2% cs = 7 => cw = (scw * cs) + (m * (cs – 1)) = 6.86667% * 7 + 1.6% * (7 - 1) = 57.66667% cs cs cs = = = 9810==>=>>cccwww===(((ssccscwww***ccscsmss))c：)++wss+cc：指((m(mwwm指的**==*((的是c(c((ssc容1s0––是列–器0%11单间宽))1)))-)列距度==(=166宽(.6.–.18.86866.度%6666666(677%m*%7%)%***(*198(21+0+mc-1+1..–1661%%.)6)*%*1)((*)98)/()--10111/2)-) ==mc6764..16%3333% 1) = 83.06667% cs cs = = 11 12 => => cw cw = = (scw (scw * * cccmsswc)) ：：sc++cw((w列最mm==**大宽(((6ccs度列.ssc8––6w数6611*（))6))6c一6==s666)6般..6887+66是66%66(771%%m2**）*1121 + 1.6% * (+c1s.6%–* (11 - (112))- 1) 1) = = 91.53333% 100% cs：列数(1~12)
  • 14.[class*="m--"]{ &:not(:first-child){margin-left:$gutter; } @for $i from 1 through 12 { &.m--#{$i} {width:(6.86666666667 / 100 * $i + 1.6 / 100 * ($i - 1)) * 100%; } } }http://codepen.io/airen/full/dpBBYX/
  • 15.CSS变量创建Grid .container {max-width:1140px;margin:'>margin: