游戏名称：# GRID GARDEN
游戏目的：练习Grid网格布局
第一道题
欢迎来到网格花园，在这里你可以通过书写CSS代码来栽种你的胡萝卜花园！使用grid-column-start 属性来给胡萝卜浇水。
比如说， grid-column-start: 3;将会给第三列的网格开始的区域浇水，这也是描述网格中从左起第三列边界的另一种方法。
开始的样子
代码
完成的效果
第二道题
哎呀，在你的花园的角落里好像长着一些杂草。用grid-column-start来除掉杂草。注意，杂草从第五个网格列开始。
开始的样子
代码
完成的效果
第三道题
若仅使用grid-column-start，网格默认只占一列。然而，你可以使用grid-column-end属性将网格拓展到多列。
使用grid-column-end，将你的所有胡萝卜浇水，但不要将水浇到土地上哦，我们要节约用水！注意，胡萝卜从第一列开始，第四列结束。
开始的样子
代码
完成的效果
第四道题
当将grid-column-start和grid-column-end一起使用时，你也许已经注意到结束的值比起始的值大。但事实证明并非如此！
尝试设置grid-column-end的值小于5，以此来给胡萝卜浇水。
开始的样子
代码
完成的效果
第五道题
如果你想要从右边数网格的列数而不是从左边数，你可以设置grid-column-start和grid-column-end为负值。比如说，你可以设置它为-1来指定为右边的第一列。
尝试将grid-column-end设置为负值。
开始的样子
代码
完成的效果
第六道题
现在尝试设置grid-column-start为负值。
开始的样子
代码
完成的效果
第七道题
你可以根据网格的开始和结束位置来定义一个网格项，你也可以用span关键词来指定你所要跨越的宽度。请注意span只能是正值。
比如说，你可以通过grid-column-end: span 2;来给这些胡萝卜浇水。
开始的样子
代码
完成的效果
第八道题
尝试在grid-column-end属性中使用span关键字来给胡萝卜浇水。
开始的样子
代码
完成的效果
第九道题
你也可以将span关键字和grid-column-start一起使用，相对于结束位置来设置其宽度。
开始的样子
代码
完成的效果
第十道题
如果每次都输入grid-column-start和grid-column-end两个属性，我们一定会厌烦的。幸运的是，grid-column是一个缩写形式，它可以一次接受两个值，只要用'/'分开就好。
比如说：grid-column: 2 / 4;就会设置网格项从第二列开始，到第四列结束。
开始的样子
代码
完成的效果
第十一道题
尝试使用grid-column来给胡萝卜浇水。span关键字在这个简写中也是可以使用的，所以你也可以试一下哟！
开始的样子
代码
完成的效果
第十二道题
其中一件事情使CSS网格布局和Flex盒布局不同的是，你可以很轻松的在二维的空间里定位一个网格项: 行和列。grid-row-start就像grid-column-start一样，只不过是在垂直方向指定起始位置。
用grid-row-start来给胡萝卜浇水吧！
开始的样子
代码
完成的效果
第十三道题
现在你可以试一试缩写属性 grid-row。
开始的样子
代码
完成的效果
第14道题
同时使用grid-column和grid-row来设置网格项在行和列中的位置。
开始的样子
代码
完成的效果
第15道题
你也可以使用grid-column和grid-row一起来定义一个较大区域的网格。试一下吧！
开始的样子
代码
完成的效果
第16道题
如果你觉得同时输入grid-column和grid-row也很复杂，我们还有另一种缩写。grid-area属性接受4个由'/'分开的值：grid-row-start, grid-column-start, grid-row-end, 最后是grid-column-end。
举个例子如下所示：grid-area: 1 / 1 / 3 / 6;。
开始的样子
代码
完成的效果
第17道题
如果我们有很多个网格项呢？你可以任意覆盖它们不用有任何担心。用grid-area定义第二个网格项为所有未浇水的胡萝卜浇水。
开始的样子
代码
完成的效果
第18道题
如果网格项不是以grid-area、grid-column、grid-row 等显示的，它们会自动按照它们在源程序中出现的位置摆放。同样我们也可以使用order属性来重写它的顺序，这也是网格布局优于表格布局的好处之一。
默认情况下，所有的网格项的order都是0，但是顺序也可以被任意设置为正数或者负数，就像z-index一样。
现在，看到第二列的胡萝卜中毒了并且最后有杂草的那一列也浇了水。现在就改变中毒的网格项的order的值来修复它们吧！
开始的样子
代码
完成的效果
第19道题
现在水和中毒的土地是交替出现的，并且所有的杂草都出现在每一列的开始。设置中毒土地的正确order值来修复它们吧！
开始的样子
代码
完成的效果
第20道题
到现在为止，你已经将你的花园设置为5列，每列占总宽度的20%；5行，每行占全部高度的20%。
这是通过设置grid-template-columns: 20% 20% 20% 20% 20%;和grid-template-rows: 20% 20% 20% 20% 20%;来实现的。每一条规则都有5个值，代表创建了5个列，每一列设置为花园宽度的20%。
但是你也可以任意设置网格项的宽度。为grid-template-columns设置一个新的值来给你的胡萝卜浇水吧！你想要将第一列的宽度设置为50%。
开始的样子
代码
完成的效果
第21道题
指定一些具有相同宽度的网格项会变得很乏味。幸运的是有repeat函数来帮助我们。
比如说，之前我们使用grid-template-columns: 20% 20% 20% 20% 20%;属性定义了5列，每列占20%。这可以被简写为：grid-template-columns: repeat(5, 20%);
使用grid-template-columns属性以及repeat函数，创建8列，每列占12.5%的宽度。这样你就不会给花园浇过多的水。
开始的样子
代码
完成的效果
第22道题
grid-template-columns不仅仅只接受百分比的值，也接受像像素或em这样的长度单位。你甚至可以将不同的长度单位混合使用。
接下来，分别将列的宽度设置为100px、3em和40%。
开始的样子
代码
完成的效果
第23道题
网格系统也引入了一个新的单位，分数fr。每一个fr单元分配一个可用的空间。比如说，如果两个元素分别被设置为1fr和3fr，那么空间就会被平均分配为4份；第一个元素占据1/4，第二个元素占据3/4。
这里，杂草占据了你第一行的左1/6，胡萝卜占据着剩下的5/6。创建两个列，并使用fr单位来定义它们的宽度。
开始的样子
代码
完成的效果
第24道题
当列的宽度采用像素，百分比或者em的单位的时候，其他使用fr单位设置的列将会平分剩下的空间。
这里的胡萝卜在左边形成了一个50像素的列，并且杂草在右边也占据着50像素的宽度。使用grid-template-columns属性，创建这两个列，使用fr再创建三列，使其平均占据剩下的空间。
开始的样子
代码
完成的效果
第25道题
现在，在你的花园的左边有一列杂草，占据75像素宽。剩余空间的3/5正在长着胡萝卜，剩下的2/5已经杂草泛滥了。
用grid-template-columns属性，将px和fr单位结合起来，来制作必要的列。
开始的样子
代码
完成的效果
第26道题
grid-template-rows和grid-template-columns的作用大概相同。
用grid-template-rows属性来为花园中除了顶部50像素之外的所有区域浇水。注意：水被设置为仅填充第五行，所以你总共需要创建5行。
开始的样子
代码
完成的效果
第27道题
grid-template是grid-template-rows和grid-template-columns的缩写形式。
比如说，grid-template: 50% 50% / 200px;将创建一个具有两行的网格，每一行占据50%，以及一个200像素宽的列。
尝试着使用grid-template属性来浇水，需要包括你的花园上部的60%，以及左侧的200像素。
开始的样子
代码
完成的效果
第28道题
你的花园看起来很棒。现在，你在花园的底部留下了50像素的小路，其他的空间用来种植胡萝卜。
不幸的是，胡萝卜地的20%已经杂草丛生了，最后一次用CSS网格布局来规划你的花园吧！
开始的样子
代码
完成的效果
总结：
- 第1关 : grid-column-start: 3;
- 第2关 : grid-column-start: 5;
- 第3关 : grid-column-end: 4;
- 第4关 : grid-column-end: 2;
- 第5关 : grid-column-end: -2;
- 第6关 : grid-column-start: -3;
- 第7关 : grid-column-end: span 2;
- 第8关 : grid-column-end: span 5;
- 第9关 : grid-column-start: span 3;
- 第10关 : grid-column: 4 / 6;
- 第11关 : grid-column: 2 / span 3;
- 第12关 : grid-row-start: 3;
- 第13关 : grid-row: 3 / 6;
- 第14关 :grid-row: 5 / 6;grid-column: 2 / 3;
- 第15关 :grid-row: 1 / span 5;grid-column: 2 / span 4;
- 第16关 : grid-area: 1 / 2 / 4 / 6;
- 第17关 : grid-area: 2 / 3 / 5 / 6;
- 第18关 : order: 1;
- 第19关 : order: -1;
- 第20关 : grid-template-columns: 50% 1fr 1fr 1fr 1fr;
- 第21关 : grid-template-columns: repeat(8, 12.5%);
- 第22关 : grid-template-columns: 100px 3em 40%;
- 第23关 : grid-template-columns: 1fr 5fr;
- 第24关 : grid-template-columns: 50px repeat(3, 1fr) 50px;
- 第25关 : grid-template-columns:75px 3fr 2fr;
- 第26关 : grid-template-rows: 50px repeat(3, 0) 1fr;
- 第27关 : grid-template: 60% 40% / 200px 1fr;
- 第28关 : grid-template: 1fr 50px / 1fr 4fr;
