css布局大杀器--grid

今天来个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 具体可以自由配置

是不是很有意思呢？快去玩玩吧！～