大漠伪前端, 就职于淘宝

CSS Grid Layout 2016-12-17 @ 大漠. #CSSConf https://www.flickr.com/photos/19139526@n00/8331063530/

大漠伪前端, 就职于淘宝

古老的 table 布局

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

希望的 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)

CSS Grid System

http://960.gs/

Grid System

Grid 计算公式固定网格计算 cs = 1 => cw = (scw * cs) + (m * (cs 1)) = 80 * 1 + 20 * (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 + 20 * (2-1) = 180 网格间距 m = 20 cs = 3 => cw = (scw * cs) + (m * (cs 1)) = 80 * 3 + 20 * (3-1) = 280 网格列数 mc = 12 cs = 4 => cw = (scw * cs) + (m * (cs 1)) = 80 * 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 = (scw * = cs) ( 容器宽度 + (m * (cs (m * 1)) (mc = 801))) * 7 + / 20 mc* (7-1) = 680 cs = 8 => cw = (scw * = cs) (1180 + (m- *(20 (cs* (12 1)) - 1))) = 80 /* 12 8 + 20 * (8-1) = 780 cs = 9 => cw = (scw * = cs) 80 + (m * (cs 1)) = 80 * 9 + 20 * (9-1) = 880 cs = 10 => cw = (scw * cs) + (m * (cs 1)) = 80 * 10 + 20 * (10-1) = 980 cs = 11 => cw = (scw * cs) + (m * (cs 1)) = 80 * 11 + 20 * (11-1) = 1080 cs = 12 => cw = (scw * cs) + (m * (cs 1)) = 80 * 12 + 20 * (12-1) = 1180 cs: 列数 (1~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/

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

[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/

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; /* 列数 */ @for $i from 1 through 12 { &.m--#{$i { --column-width: $i;

http://www.w3cplus.com/css3/create-css-grid-system-with-css-variables.html http://codepen.io/airen/full/jmjvon/

Grid Frameworks Susy 960gs BootStrap Grid Zen Grids

CSS Grid Layout

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

Grid 术语

网格容器和网格项目 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>

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

网格轨道

网格单元格

网格区域

网格间距

定义网格

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

.cards { display: grid; http://codepen.io/airen/full/woyoxz/

.cards { display: grid; grid-template-columns: 33.33% 33.33% 33.33%; grid-template-rows: 200px 200px 200px; http://codepen.io/airen/full/mbqbqq/

.cards { display: grid; grid-template-columns: 33.33% 33.33% 33.33%; grid-template-rows: 200px 200px 200px; grid-gap: 20px; http://codepen.io/airen/full/glvlzr/

.cards { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 200px 200px 200px; grid-gap: 20px; http://codepen.io/airen/full/woyozj/

.cards { display: grid; grid-template-columns: 500px 1fr 2fr; grid-template-rows: 200px 200px 200px; grid-gap: 20px; http://codepen.io/airen/full/nbybvg/

.cards { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 200px 200px 200px; grid-gap: 20px; http://codepen.io/airen/full/woyozj/

.cards { display: grid; grid-template-columns: repeat(3, 1fr) ; grid-template-rows: 200px 200px 200px; grid-gap: 20px; http://codepen.io/airen/full/gnqnbz/

.cards { display: grid; grid-template-columns: repeat(3, 1fr) ; grid-template-rows: 200px 200px 200px; grid-gap: 20px; http://codepen.io/airen/full/ypepmx/

.cards { display: grid; grid-template-columns: repeat(3, 1fr) ; grid-auto-rows: 200px; grid-gap: 20px; http://codepen.io/airen/full/abqpbx/

.cards { display: grid; grid-template-columns: repeat(auto-fill, 200px) ; grid-gap: 20px; http://codepen.io/airen/full/abqpbx/

http://codepen.io/airen/full/abqpbx/

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)) ; grid-gap: 20px; http://codepen.io/airen/full/obqwnm/

http://codepen.io/airen/full/obqwnm/

.card:nth-child(1) { grid-column-start: 2; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; http://codepen.io/airen/full/nbydjy/

.card:nth-child(1) { grid-column: 2 / 4; grid-row: 1 / 3; http://codepen.io/airen/full/lbqxjp/

.card:nth-child(1) { grid-area: 1 / 2 / 3 / 4; /*grid-area: grid-row-start / grid-column-start / grid-row-end / grid- columnend*/ http://codepen.io/airen/full/womrej/

.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; http://codepen.io/airen/full/zbrlap/

.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; http://codepen.io/airen/full/enqzlx/

.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; http://codepen.io/airen/full/mbqjgx/

A 12 column, flexible grid

<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: http://getbootstrap.com/css/#grid

BootStrap Grid: http://getbootstrap.com/css/#grid

.wrapper { display: grid; http://codepen.io/airen/full/bblgoj/

.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; http://codepen.io/airen/full/abqpxd/

.header { grid-column: col / span 12; grid-row: 1;.box1 { grid-column: col / span 4; grid-row: row 2; http://codepen.io/airen/full/knqaye/

.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; http://codepen.io/airen/full/womrvl/

.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; http://codepen.io/airen/full/mbqpkw/

Grid and Box Alignment Module

.wrapper { display: flex;.wrapper li { min-width: 1%; flex: 1 0 25%;.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; http://codepen.io/airen/full/pbqpmy/

.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; http://codepen.io/airen/full/nbypvv/

Flexbox Layout Or Grid Layout?

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

http://www.w3cplus.com/css3/solving-problems-with-css-grid-and-flexbox-the-card-ui.html http://codepen.io/airen/full/qqxrxp/

待续...

相关资料 Grid 规范 : https://www.w3.org/tr/css-grid-1 Box Alignment 规范 :https://www.w3.org/tr/css-align-3 Flexbox 规范 : 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/

THANK YOU

大漠 伪前端, 就职于淘宝

大漠伪前端, 就职于淘宝