Chrome又种草——网格布局来了

↗点击上方“Web安全与前端”关注我们

Chrome57版本支持了一种新的CSS布局——网格布局（CSS Grid Layout）。用水平的和垂直的网格线把页面分成不同的单元格，在使用的时候，可以通过网格线的位置定义单元格，还可以跨单元格定义区域。这种方式可以为每个区域命名，在做媒体查询适配的时候，非常方便布局。

下图展示了网格布局的主要方式：

首先定义一个容器，设置容器的display属性为grid。然后通过grid-template-columns和grid-template-rows属性定义网格的列数和行数。列和行之间是有grid-line的，我们可以通过线的位置来定义boxa的位置。

代码中，定义boxa的位置grid-column为从第一条垂直线，到第5条垂直线之间的区域,grid-row为定义从第一条平行线到第二条平行线之间的区域，就是第一行，也就是header的范围。 注意，在这里线是从1开始数的。

效果如图所示：

在boxa中还定义了grid-area属性，这个属性和wrapper中的grid-template-area属性对应，用来给这个区域放置具体的位置。这样，在用媒体查询适配的时候，可以直接通过定义grid-area来直接布局。

同时，我们给b,c,d板块的area分别命名如下：

在进行媒体查询的时候，我们可以直接用area排版如下：

除了这些，网格布局还有什么特点呢？它还提供了对齐的属性： 

align-content : start/end/center

justify-content : start/end/center/space-evenly

这两个属性用来定义所在区域的对齐方式。

下图就是整个wrapper的justify-content:end对齐方式。我们看到，右侧并没有完全紧贴外面的框，是因为我们设置了gird-gap间距。

除了大区域的对齐，网格布局还提供了内容的对其方式，如下图第一个板块中的文字a：

align-self : start/end/center

justify-self : start/end/center

或许以后我们就不需要用float的方式来对齐了。

网格布局的属性还有很多，作为一篇介绍了解性的文章，就不一一列举了。说说它的优势吧：

1.更容易适配。

       像上面的示例，在媒体查询的时候，我们只要再次布局每个区域就可以了。

2. 便于排版，强力支持模块化。

        这种布局的展示，甚至可以不按照div在页面上的顺序。只要用grid-column和grid-row定义好所在区域的位置即可，与div的实际位置没有关系。这样，对于前端模块化将是很好的支持，并且css也可以单独定义当前这个模块了。

3. 网格内可以随意嵌套网格。

        在某个区域中，只要把当前区域的display设置成grid，那么这个div里面的内容同样可以使用网格布局定义自己的样式。

4. 网格布局同样支持绝对定位，并且，还支持div的跨网格覆盖。

         比如你设定了第一个div为第1条线到地4条线之间的区域，那么还可以定义一个div为第2条到第5条线之间的区域，只要设定好z-index即可。

目前这个布局方式浏览器支持还不广泛，我们可以一起期待一下。我也用这个布局制作了一个不大不小的demo，包含嵌套网格、媒体查询等多种常用的样式，点击阅读原文即可（要用pc端的chrome57以上版本才可以看哦）。

总体感觉，用了这个属性之后，对页面构建更需要有一个全局的意识，同我们之前的布局方式差别还是略大的。

注：本文原创，转载请通过本公众号联系作者。

安全&前端

长按二维码
关注我们