体验 CSS Grid 布局

前几天练习了flex弹性盒子布局，感觉很强大，使用起来很别扭，今天玩Grid网格布局，同样很强大，使用起来更别扭。。。

Grid网格布局是何方神圣？

CSS Grid 布局是 CSS 中最强大的布局系统。与 flexbox 的一维布局系统不同，CSS Grid 布局是一个二维布局系统，也就意味着它可以同时处理列和行。通过将 CSS 规则应用于 父元素 (成为 Grid Container 网格容器)和其 子元素（成为 Grid Items 网格项），你就可以轻松使用 Grid(网格) 布局。

Grid代码长啥样：

看网上的教程，才知道：

flexbox 适合一维布局，比如导航条。

grid 适合二维布局，比如圣杯结构。

换成人话就是，首先，用grid网格搭建整体布局结构，在每个网格里的局部布局，就使用flexbox。

flexbox的兼容性已经很好了，可以放心大胆的用。grid还差点，在生产环境中谨慎使用。

由于，网上的教程一把一把的，这里就不复制粘贴详细的教程了，大家可以新建几个html文件，跟着教程练习练习。下面分享三篇文章，看完这三篇文章，你就已经掌握Grid布局了。一定要按顺序看啊！

1、《5分钟学会 CSS Grid 布局》

http://www.css88.com/archives/8506

2、《CSS Grid 布局完全指南》

http://www.css88.com/archives/8510

3、《如何使用 CSS Grid 快速而又灵活的布局 》

http://www.css88.com/archives/8512

相信看完以上三篇文章，你就能体会到Grid布局的变态强大的地方了。

好，字数凑够了，可以开启原创声明了。