大漠伪前端, 就职于淘宝

Size: px

Start display at page:

Download "大漠伪前端, 就职于淘宝"

玮围李
7 years ago
Views:

1 CSS Grid Layout 大漠. #CSSConf

2 大漠伪前端, 就职于淘宝

4 古老的 table 布局

6 现代 Web 布局 Float inline-block display: table position (absolute 或 relative) Frameworks( 很多 Frameworks)

7 希望的 Web 布局 Flexbox ( CSS Grid Layout ( Box Alignment (

8 CSS Grid System

10 Grid System

11 Grid 计算公式固定网格计算 cs = 1 => cw = (scw * cs) + (m * (cs 1)) = 80 * * (1-1) = 80 scw = ( 容器宽度 (m * (mc 1))) / mc cw = (scw * cs) + (m * (cs 1)) scw: 指的是单列宽度 m: 指的是列间距 mc: cw 最大列数 = (scw(* 一般是 cs) + 12) (m * (cs 1)) cw: 列宽度网格容器总宽度 1180 cs = 2 => cw = (scw * cs) + (m * (cs 1)) = 80 * * (2-1) = 180 网格间距 m = 20 cs = 3 => cw = (scw * cs) + (m * (cs 1)) = 80 * * (3-1) = 280 网格列数 mc = 12 cs = 4 => cw = (scw * cs) + (m * (cs 1)) = 80 * * (4-1) = 380 cs = 5 => cw = (scw * cs) + (m * (cs 1)) = 80 * * (5-1) = 480 cs = 6 => cw = (scw * cs) + (m * (cs 1)) = 80 * * (6-1) = 580 cs = 7 => cw = (scw * = cs) ( 容器宽度 + (m * (cs (m * 1)) (mc = 801))) * 7 + / 20 mc* (7-1) = 680 cs = 8 => cw = (scw * = cs) ( (m- *(20 (cs* (12 1)) - 1))) = 80 /* * (8-1) = 780 cs = 9 => cw = (scw * = cs) 80 + (m * (cs 1)) = 80 * * (9-1) = 880 cs = 10 => cw = (scw * cs) + (m * (cs 1)) = 80 * * (10-1) = 980 cs = 11 => cw = (scw * cs) + (m * (cs 1)) = 80 * * (11-1) = 1080 cs = 12 => cw = (scw * cs) + (m * (cs 1)) = 80 * * (12-1) = 1180 cs: 列数 (1~12)

12 [class*="m--"]{ padding-right: $gutter; padding-left: $i from 1 through 12 { &.m--#{$i { width: (80 * $i + 20 * ($i - 1)) * 1px;

13 Grid 计算公式流体网格计算 cs = 1 => cw = (scw * cs) + (m * (cs 1)) = % * % * (1-1) = % 网格容器总宽度 100% cs = 2 => cw = (scw * cs) + (m * (cs 1)) = % * % * (2-1) = % 网格间距 m = 1.6% scw = (100% (m * (mc 1))) / mc 网格列数 mc = 12 cs = 3 => cw = (scw * cs) + (m * (cs 1)) = % * % * (3-1) = 23.8% cs = 4 => cw = (scw * cs) + (m * (cs 1)) = % * % * (4-1) = % cs = 5 => cw = (scw * cs) + (m * (cs 1)) = % * % * (5-1) = % cw = (scw * cs) + (m * (cs 1)) cs = 6 => cw = (scw * cs) + (m * (cs 1)) = % * % * (6-1) = 49.2% cs = 7 => cw = (scw * cs) + (m * (cs 1)) = % * % * (7-1) = % cs = 8 => cw = (scw * cs) + (m * (cs 1)) = % * % * (8-1) = % scw: 指的是单列宽度 scw = ( 容器宽度 (m * (mc 1))) / mc cs = 9 => cw = (scw * cs) + (m * (cs 1)) = % * % * (9-1) = 74.6% scw = (100% - (1.6% * (12-1))) / 12 m: 指的是列间距 (1.6%) cs = 10 => cw = (scw * cs) + (m * (cs 1)) = % * % * (10-1) = % scw = % cs = 11 => cw = (scw * cs) + (m * (cs 1)) = % * % * (11-1) = % mc: 最大列数 ( 一般是 12) cw = (scw * cs) + (m * (cs 1)) cw: 列宽度 cs = 12 => cw = (scw * cs) + (m * (cs 1)) = % * % * (12-1) = 100% cs: 列数 (1~12)

14 [class*="m--"]{ &:not(:first-child){ margin-left: $i from 1 through 12 { &.m--#{$i { width: ( / 100 * $i / 100 * ($i - 1)) * 100%;

15 CSS 变量创建 Grid.container { max-width: 1140px; margin: 3em auto; padding: var(--gutter); :root{.row{ display: flex; flex-wrap: wrap; --color: #0C3934; --bg: #F8EBEE; margin: 0 calc(var(--gutter) - ( var(--gutter) * 2) ) 20px; [class*="m--"]{ /* Grid */ padding-right: calc(var(--gutter)); padding-left: calc(var(--gutter)); --gutter: 10px; /* 列间距 */ flex-basis: calc((100% / var(--columns)) * var(--column-width)); --columns: 12; /* 列数 $i from 1 through 12 { &.m--#{$i { --column-width: $i;

17 Grid Frameworks Susy 960gs BootStrap Grid Zen Grids

18 CSS Grid Layout

19 CSS Grid Layout 发展过程 2010 年由微软提出, 最早在 IE10 实施 2011 年 4 月首次公开草案 2015 年 3 月 2 日 Chrome 支持 2016 年 9 月 29 日成为 W3C 候选标准

20 Grid 术语

21 网格容器和网格项目 display: grid inline-grid a <div class="container"> <div class="item item-1"></div> 网格项目 </div> <div class="item item-2"></div> <div class="item item-3"></div>

22 网格线 grid-template-columns: 300px 200px 100px; grid-template-rows: 100px 50px;

23 网格轨道

24 网格单元格

25 网格区域

26 网格间距

27 定义网格

28 grid-template-columns: 300px 200px 100px; grid-template-rows: 100px 50px;

29 .cards { display: grid;

30 .cards { display: grid; grid-template-columns: 33.33% 33.33% 33.33%; grid-template-rows: 200px 200px 200px;

31 .cards { display: grid; grid-template-columns: 33.33% 33.33% 33.33%; grid-template-rows: 200px 200px 200px; grid-gap: 20px;

32 .cards { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 200px 200px 200px; grid-gap: 20px;

33 .cards { display: grid; grid-template-columns: 500px 1fr 2fr; grid-template-rows: 200px 200px 200px; grid-gap: 20px;

34 .cards { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 200px 200px 200px; grid-gap: 20px;

35 .cards { display: grid; grid-template-columns: repeat(3, 1fr) ; grid-template-rows: 200px 200px 200px; grid-gap: 20px;

36 .cards { display: grid; grid-template-columns: repeat(3, 1fr) ; grid-template-rows: 200px 200px 200px; grid-gap: 20px;

37 .cards { display: grid; grid-template-columns: repeat(3, 1fr) ; grid-auto-rows: 200px; grid-gap: 20px;

38 .cards { display: grid; grid-template-columns: repeat(auto-fill, 200px) ; grid-gap: 20px;

39 .cards { display: grid; grid-template-columns: repeat(auto-fill, 200px) ; grid-gap: 20px;

41 .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)) ; grid-gap: 20px;

42 .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)) ; grid-gap: 20px;

44 .card:nth-child(1) { grid-column-start: 2; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3;

45 .card:nth-child(1) { grid-column: 2 / 4; grid-row: 1 / 3;

46 .card:nth-child(1) { grid-area: 1 / 2 / 3 / 4; /*grid-area: grid-row-start / grid-column-start / grid-row-end / grid- columnend*/

47 .cards { display: grid; grid-template-columns: [side-start] 1fr [main-start] 1fr 1fr [main-end];.card:nth-child(1) { grid-column: main-start / main-end; grid-row: main-start / main-end; grid-template-rows: [main-start] 200px 200px [main-end]; grid-gap: 20px;

48 .cards { display: grid; grid-template-columns:.card:nth-child(1) { grid-area: main; [side-start] 1fr [main-start] 1fr 1fr [main-end]; grid-template-rows: [main-start] 200px 200px [main-end]; grid-gap: 20px;

49 .cards { display: grid; grid-template-columns: repeat(3, 1fr);.card:nth-child(1) { grid-area: main;.card:nth-child(4) { grid-template-rows: 200px 200px; grid-template-areas: grid-area: side1; side1 main main side2 main main ; grid-gap: 20px;.card:nth-child(8) { grid-area: side2;

50 A 12 column, flexible grid

51 <div class="col-xs-6 col-md-4">.col-xs-6.col-md-4</div> </div>  <div class="row"> <div class="col-xs-6 col-md-4">.col-xs-6.col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6.col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6.col-md-4</div> </div>  <div class="row"> BootStrap Grid:

52 BootStrap Grid:

54 .wrapper { display: grid;

55 .wrapper { display: grid; grid-template-columns: repeat(12, [col] 1fr); grid-template-rows: repeat(5, [row] auto); grid-column-gap: 1em; grid-row-gap: 15px;

56 .header { grid-column: col / span 12; grid-row: 1;.box1 { grid-column: col / span 4; grid-row: row 2;

57 .box1 { grid-column: col / span 4; grid-row: row 2 / span 2;.box2 { grid-column: col 5 / span 4; grid-row: row 2 / span 3;

58 .container { display: grid; grid-template-columns: repeat(12, [col] 1fr); grid-column-gap: 1em; grid-row-gap: 15px; [class*= col ]:nth-of-type(n+1):nth-of-type(-n+12){ grid-column: span; [class*= col ]:nth-of-type(n+13):nth-of-type(-n+18){ grid-column: span 2;

59 Grid and Box Alignment Module

60 .wrapper { display: flex;.wrapper li { min-width: 1%; flex: %;.wrapper li:nth-child(2) { align-self: center;.wrapper li:nth-child(3) { align-self: flex-start;.wrapper li:nth-child(4) { align-self: flex-end;

61 .wrapper { display: grid; grid-template-columns: repeat(4, fr);.wrapper li:nth-child(2) { align-self: center;.wrapper li:nth-child(3) { align-self: start;.wrapper li:nth-child(4) { align-self: end;

62 Flexbox Layout Or Grid Layout?

63 Flexbox Layout 定义一个维度, 行或者列 Grid Layout 定义两个维度, 行和列

65 待续...

66 相关资料 Grid 规范 : Box Alignment 规范 : Flexbox 规范 : Flexbox 教程 : Grid 教程 : Grid 案例 : Github: Grid 更多资源 :

67 THANK YOU

5-1 nav css 5-2

5 HTML CSS HTML CSS Ê Ê Ê Ê 5-1 nav css 5-2 5-1 5 5-1-1 5-01 css images 01 index.html 02 5-3 style.css css 03 CH5/5-01/images 04 images index.html style.css 05

大漠 伪前端, 就职于淘宝

大漠伪前端, 就职于淘宝