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