此外W3C也有一个栅格化布局(Grid Layout)的规范，这个布局是基于两维栅格系统设计的，可以轻松按照我们的意愿改变页面的设计。它与Flexbox配合效果更佳。但目前仍处于草案阶段。翻看了W3C的最新草案内容，对Grid Layout的使用方法和原理简单介绍下。

　　1)定义grid：

　　首先在grid item外的父级容器上定义display: grid.

　　Values：

　　grid – 定义block-level的栅格;

　　inline – 定义 inline-level的栅格

　　2)一些相关概念：

　　grid lines – 是横向和纵向划分grid的线，它可以一朝数字顺序被指定，也可以用用户制定的名字被指定。

　　grid tracks – 指的是一个grid列或者行之前的区域，换而言之是两个相邻的grid lines之前的空间。下图是第二行和第三行之间的grid tracks。

　　grid cells – 一个grid cell指的是grid中最小的单位。

　　grid areas – 是用来展现一个或多个grid item的逻辑空间。它被四条grid line包围。

　　3)grid item 属性

　　了解了一些基本概念后，就可以更加绒里理解相关的grid item属性。

　　grid-column-start

　　grid-column-end

　　grid-row-start

　　grid-row-end

　　这四个属性中，grid-column-start和grid-row-start指明区域起始线，grid-column-end和grid-row-end指明区域结束线。这四个属性均有以下四个值可取。

　　Values：

　　– 可以是一个数字，代表的是 grid line

　　span– 该项会横跨所提供的数字个grid tracks

　　span– 该项会横跨直到碰到下一个指定名字的grid line

　　auto – 自动或者默认属性

　　举个例子：

　　代表的区域就是：

　　除以上提到，grid还拥有更多的属性，使之可以定义grid item的宽高，间隙，内部自适应的方式，对齐方式等等。更多属性可以参考W3C文档。

　　4)浏览器支持：

　　令人遗憾的是，浏览器的支持度还未尽人意，未来在UA上获取更多支持才是Grid发展的根本。

　　框架搭建好，才仅仅是响应式的开始。但是俗语有云：Well begun is half done. 响应式从做好的布局开始。

　　原文链接: ISUX