本文已参与「新人创作礼」活动，一起开启掘金创作之路。
前言
本文主要内容：总结了CSS中grid布局相关的知识，是与flex box不同的另一种布局方式
一周没有写博客了，一方面是感觉近期学习的东西比较零散，无法写成一篇系统性的博客；另一方面确实也是有点惰性了，觉得学过就算了，懒得整理了。而结果就是近期学习的效果大大不如写博客的那段时间。所以今天先补上上一篇博客提到的grid布局，明天学习react并且以博客记录。
下面的文章以Codepip提供的另一个练习grid布局的小游戏为例总结一下
练习项目预览
在容器内部对组件布局的第二种方法，即display: grid;
可以看到项目的初始状态如下
花园的底部留下了50像素的小路，其他的空间用来种植胡萝卜，用水来浇灌它们
胡萝卜地的20%则杂草丛生，用农药来消灭它们
grid-template
grid顾名思义就是方格，所以最重要的就是如何划分格子
就像练习项目的初始状态，分成了均等的5行5列，水在1行2列的格子，农药在1行1列的格子
而这种均等的分割可以使用百分比来实现，即
#garden {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 20% 20% 20% 20% 20%;
}
grid-column & grid-row
这两个属性需要结合已经划分好的格子使用，以grid-column为例，存在如下几种用法
grid-column-start
移动当前的内容到指定的列，仅限于1个格子
如下图，要将水移到第三个格子中
按照如下设置
#water {
grid-column-start: 3;
}
便能将水移动
grid-column-end
结合grid-column-start使用，两者结合来指定位置范围
如下图，水在第一个格子grid-column-start: 1;
通过设置
grid-column-end: 4;，使得水覆盖三个格子（end指定的格子不覆盖）
grid-column-end还有另一种用法是添加属性值为span x，即从start位置向后覆盖x格
所以上面的也可以设置为grid-column-end: span 3;
简洁用法grid-column
可以使用grid-column替代grid-column-start和grid-column-end
它接受两个值分别对应start和end，用/分开
即grid-column: <grid-column-start>/<grid-column-end>
更简洁用法grid-area
了解了grid-column后，grid-row也是一样的
于是就很容易想到，同时写column和row的时候，可以简洁写为area
用法如下：
grid-area: <grid-row-start>/<grid-column-start>/<grid-row-end>/<grid-column-end>
再回到grid-template
均分grid再调整位置的方式总是很难如愿，在一开始便有计划地划分格子则会有利于布局，同样以grid-template-column来介绍
基础的单位
它不仅仅只接受百分比的值，也接受像像素或em这样的长度单位，甚至可以将不同的长度单位混合使用。
如grid-template-columns: 100px 3em 40%;便是一种合理的用法
特有的单位
分数fr，每一个fr单元分配一个可用的空间，接下来让杂草占据第一行的左1/6，胡萝卜占据着剩下的5/6，初始情况如下
所以设置
grid-template-columns: 1fr 5fr;
当列的宽度采用像素，百分比或者em的单位的时候，其他使用
fr单位设置的列将会平分剩下的空间
简洁写法grid-template
grid-template-columns和grid-template-rows也有同样的简洁写法，即grid-template
同样前面rows后面columns，不再赘述
题解
最后的代码就非常简单了，grid-template: 1fr 50px/1fr 4fr;
项目链接：cssgridgarden.com/
