Name		Name	Last commit message	Last commit date
parent directory ..
.DS_Store		.DS_Store
3q.png		3q.png
README.md		README.md
alibaba.png		alibaba.png
bootstrap.png		bootstrap.png
caniuse.png		caniuse.png
grid-cheatsheet.pdf		grid-cheatsheet.pdf
mocha.png		mocha.png
weibo.png		weibo.png

README.md

CSS Grid Layout

历史需求因果

看几个例子

Web 布局

table
float
position
flexbox
……

grid

网wăng格gé布bù局jú

网格布局的需求和概念一直存在

网格布局的要素

描述步骤

画网
把格子填到网里
把内容填到格子里

1. 画网

几行几列？
每行多宽？每列多高？
延展性：“漏网之鱼”

特殊情况：响应式布局

每列 (最小) 宽度固定
响应式计算总列数
自增必要的行

2. 把格子填进网里

A 每个格子独立

放第几行？第几列？
占多少行？多少列？

B 按顺序填进网里

这个格子排在第几？

额外的：网的排法
(横向优先/纵向优先)

3. 对齐

行列真空 -> 行列对齐
内容真空 -> 内容对齐

额外的：网的行间列间空隙

CSS Grid Layout

start from W3C Working Draft 7 April 2011

What Happened in 2011?

规范介绍

术语

网格

template
row / column
cell

辅助

line / track

内容

area

图解 Grid 语法

最低消费

画网 + 填格子
自动排序
响应式
对齐和间隙

Demos

效率和体验问题

语义化描述：线/区域
span 语法
语法简写

浏览器支持情况

周边及其他

结合 media query
postcss-grid-kiss
对 CSS 语法词法的思考

相关材料

Thanks