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) 网格布局

3、Box Alignment (https://drafts.csswg.org/css-align)

---

CSS Grid Layout 发展过程

2010年由微软提出，最早在IE10实施

2011年4月首次公开草案

2015年3月2日Chrome支持

2016年9月29日成为W3C候选标准

---

Grid 

网格布局可以用这个模块实现许多不同的布局。网络布局可以将应用程序分割成不同的空间，或者定义他们的大小、位置以及层级。

就像表格一样，网格布局可以让Web设计师根据元素按列或行对齐排列，但他和表格不同，网格布局没有内容结构，从布使各种布局不可能与表格一样。例如，一个网格布局中的子元素都可以定位自己的位置，这样他们可以重叠和类似元素定位。

此外，没有内容结构的网格布局有助于使用流体、调整顺序等技术管理或更改布局。通过结合CSS的媒体查询属性，可以控制网格布局容器和他们的子元素，使用页面的布局根据不同的设备和可用空间调整元素的显示风格与定位，而不需要去改变文档结构的本质内容。

网格容器和网格项目

grid 

网格线

网格线

grid-template-columns / grid-template-rows;

网格间距 （grid-gap;）

---

FLEXBOX OR GRID?

Flexbox Layout定义一个维度，行或者列；（一维布局）

Grid Layout定义两个维度，行和列；（二维布局，你可以根据你的设计需求，将内容区块放置到任何你想要放的地方。那么不用多说，你应该知道哪一种更适合你的布局。）

这样的布局不少见，很容易的就可以实现

---

兼容性

兼容性

caniuse众观下来，仅在IE10+上支持，而且也仅支持部分属性；

---

相关资料：

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/  

---

未完……

先做一个小铺垫，之后待我研究网格线、网格轨道、网格单元格、网格区域和网格容器等等一些相关，再来补充本文。