今天来个flex的姊妹grid～
比较了一下，grid更适合复杂的布局，像在excel中一样随便布局，真的是很厉害呢！～
基础概念我看的是大漠大大的博客，总结的真的灰常好
传送门：http://www.w3cplus.com/css3/playing-with-css-grid-layout.html
http://www.w3cplus.com/css3/a-complete-guide-css-grid-layout.html
看过基础概念，其实很多熟悉类似于flex
最重要的就是怎么合并单元格！
通过这个game我收获了很多
http://cssgridgarden.com
其中一些题目还是挺有意思的，我来分享一下吧
#17
通过设置gird-area：row-start|column-start|column-start|column-end
来叠加效果，就可以完成啦～
#20
对于自由空间（总空间-固定空间）可以通过设置百分比和fr来调整
#21
对于重复出现的布局，我们可以采用repeat（x,y）来设置，也可以是1fr。
#22
各种单位都可以，是不是很灵活啊！～！
#24
这道题，有点意思，因为poison和water 的start和end都已经固定了，所以我们要合理分配自由空间，而且注意到⚠️必须要有5行5列
也就是说在2个50px之间必须要有3个值，具体是多少也没有关系。
#26
这个里面，具体的值就有关系了，
因为water固定了，所以必须要5行，而且前4行必须是0才可以
所以我们就设置了0fr，fr可以取0 啊啊啊
#28
最后一关～
记住 row／column 具体可以自由配置
是不是很有意思呢？快去玩玩吧！～😄
