CSS Grid布局

希望各位指正和教导。

参考学习文档：
文档一：【5分钟学会 CSS Grid 布局】http://www.css88.com/archives/8506
文档二：【如何使用 CSS Grid 快速而又灵活的布局】http://www.css88.com/archives/8512
文档三：【CSS Grid 布局完全指南(图解 Grid 详细教程)】http://www.css88.com/archives/8510
文档四：【CSS Grid布局这样玩】https://blog.csdn.net/hj7jay/article/details/70670467

个人体会，我看前面三个纯文档，总感觉自己已经会了，但是自己准备些案例的时候，就感觉不出能写什么。参考文档四的话，比较简洁，主要是他提供了一个小游戏，让你自己去运用grid，发现自己不理解的地方。
小游戏地址：http://cssgridgarden.com/

grid布局，分两部分，grid容器和grid项目；

第一，grid容器
容器主要难点在于grid-template的熟练运用。

1.repeat：重复值
最简单的就是，一个容器中，你要平均分配，例如，一行被平均分成5等份：grid-template-rows：repeat(5,1fr);

repeat重复.jpg

fr:等份网格容器中可用空间（使用 fr 单位）

2.grid-gap：网格项目行列之间的间距
3.grid-template-rows:50px 0 0 0;
原图中，拥有5层，只有两个条件，整块区域分成50px和最后一层有颜色。最简单的是，第一层50px，中间三层高度直接设置成0，最后一层默认auto，占满。（其实前面我一直搞不清楚这个到底是什么回事，因为我只记得里面要有数值px,%,auto等）

2.jpg

rows5.jpg

rows0.jpg

4.grid-template
grid-template: none | subgrid | / ;

image.png

image.png

例如：grid-template: 200px / 50%; 就代表了就写了行是200px高的，宽度列是占总长的一半。其他的默认。

image.png

image.png

第二，grid项目
1.order：网格项顺序，默认是0，可以是正数或者负数，类似于z-index。

order0.jpg

order1.jpg

order-1.jpg

2.span：跨越的行或者列的数量或者名称
grid-column:3/4; === grid-column-start:3; grid-column-end:4 === grid-column:3/ span 1;

image.png

3.grid-area:为网格项提供一个名称，以便可以 被使用网格容器 [grid-template-areas]属性创建的模板进行引用。 另外，这个属性可以用作[grid-row-start]+ [grid-column-start]+ [grid-row-end]+ [grid-column-end] 的缩写。
简单的说：grid-area:开始行 / 开始列 / 结束行 / 结束列；

image.png