CSS网格花园-案例分析（种胡萝卜）

        个人认为CSS网格花园中的两个案例值得分析思考，也是刚刚接触这个领域，说的不对欢迎指正，有更好的方法也欢迎讨论。

        在种胡萝卜的案例中一共有28个案例，个人觉得26和28值得自发思考一下。

网格编程游戏链接：

Grid Garden - 一个用来学CSS grid的游戏 (cssgridgarden.com)https://cssgridgarden.com/#zh-cn        这个游戏主要是给网格中的胡萝卜浇水，给杂草放除草剂，很好理解的一款编程游戏。

目录

案例26

案例分析： 

代码实现： 

效果展示： 

案例28 

案例分析：  

 代码实现： 

效果展示： 

---

案例26

        要求你填写如下空白处的代码 ：

案例分析： 

首先，在做了前面案例的前提下，相信对grid-template-columns的使用也有了一定的了解，在这个案例中是使用grid-template-rows对网格内容进行填充。

已知：现除了顶部50px之外的区域均要浇水，也就是说我们想办法把这一小条避开就好，题目也给出了提示总共需要创建5行网格。

分析：那么为什么现在的水只浇在最后一行呢，仔细查看代码就可以看出是因为column（列）指定了从第一条列线延伸涵盖到第六条列线，而row（行）指定了从第五条行线延伸涵盖到了第六条列线，故而才会出现这样的效果。所以，现在思路就清晰了，我们需要有五行，而恰好所有萝卜都要在第五行内才可以实现全部浇水。

代码实现： 

grid-template-rows:10px 10px 10px 20px 1fr;

这表示网格将具有五行，每行的尺寸分别是：

1.第一行高度为 10px

2.第二行高度为 10px

3.第三行高度为 10px

4.第四行高度为 20px

5.第五行高度为 1fr，这是一个灵活的单位，表示剩余空间的一等份。如果网格容器的高度在减去前四行固定高度后还有剩余，那么这剩余的空间将全部被第五行占据。

效果展示： 

案例28 

         要求你填写如下空白处的代码 ： 

案例分析：  

首先，在做了前面案例的前提下，不难看出这是一个grid-template综合运用，是grid-template-rows和grid-template-columns的缩写形式。

已知：网格底部要留50px的空隙不放除草剂也不浇水，并且上部有20%的杂草需要用除草剂，其他的浇水。

分析：可见代码未给我们一点对于行列的设置，首先对于50px空隙这个要求，和我们26案例很像，其实只要把那个设置倒转过来就可以了，那么在列这方面的设置，就需要把除草剂和水区分开来就好，除草剂占20%，其余部分是水。

 代码实现： 

grid-template:1fr 10px 10px 10px 20px/20% 1fr;

第一部分（列）：1fr 10px 10px 10px 20px

第二部分（行）：20% 1fr

• 1fr 10px 10px 10px 20px 表示网格将包含五列，每列的尺寸分别是：

第一列：1fr，一个灵活的单位，表示剩余空间的一等份

第二、三、四列：每列都是10px高。

第五列：20px高。

• 20% 1fr 表示网格将包含两行，每行的尺寸分别是：

第一行：20%，表示该行的高度是网格容器高度的20%。

第二行：1fr，它表示该行将占据剩余空间的一等份。

效果展示： 

运气就是，机会正好碰上了你的努力。