个人认为CSS网格花园中的两个案例值得分析思考,也是刚刚接触这个领域,说的不对欢迎指正,有更好的方法也欢迎讨论。
在种胡萝卜的案例中一共有28个案例,个人觉得26和28值得自发思考一下。
网格编程游戏链接:
Grid Garden - 一个用来学CSS grid的游戏 (cssgridgarden.com)https://cssgridgarden.com/#zh-cn 这个游戏主要是给网格中的胡萝卜浇水,给杂草放除草剂,很好理解的一款编程游戏。
目录
案例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
,它表示该行将占据剩余空间的一等份。
效果展示:
运气就是,机会正好碰上了你的努力。