GRID GARDEN

grid布局可以创建任意数量的网格。fraction unit 使得控制布局比例非常方便，repeat可以重复布局。grid布局基于最简原则，只需要定义需要使用的行和列，网格支持命名。Grid Garden是透过闯关游戏的方式来熟悉grid的语法，还蛮有趣的，也推荐给大家。

1

#garden {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows: 20% 20% 20% 20% 20%;
}

#water {
    grid-column-start: 3;
}

2

#garden {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows: 20% 20% 20% 20% 20%;
}

#water {
    grid-column-start: 3;
}

3

#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;
}

4

#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;
}

5

#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;
}

6

#garden {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows: 20% 20% 20% 20% 20%;
}

#poison {
    grid-column-start: -3;
}

7

#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;
}

8

#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;
}

9

#garden {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows: 20% 20% 20% 20% 20%;
}

#water {
    grid-column-start: span 3;
    grid-column-end: 6;
}

10

#garden {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: 20% 20% 20% 20% 20%;
}

#water {
	grid-column: 4 / 6;
}

11

#garden {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows: 20% 20% 20% 20% 20%;
}

#water {
    grid-column: 2 / 5;
}

12

#garden {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows: 20% 20% 20% 20% 20%;
}

#water {
    grid-row-start: 3;
}

13

#garden {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows: 20% 20% 20% 20% 20%;
}

#water {
    grid-row: 3/ 6;
}

14

#garden {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows: 20% 20% 20% 20% 20%;
}

#poison {
    grid-row: 5/ 6;
    grid-column: 2 / 3;
}

15

#garden {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows: 20% 20% 20% 20% 20%;
}

#water {
    grid-row: 1 / span 5;
    grid-column: 2 / span 4;
}

16

#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;
}

17

#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;
}

18

#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;
}

19

#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;
}

20

#garden {
    display: grid;
    grid-template-columns: 50% 1fr 1fr 1fr 1fr;
    grid-template-rows: 20% 20% 20% 20% 20%;
}

#water {
    grid-column: 1;
    grid-row: 1;
}

21

#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;
}

22

#garden {
    display: grid;
    grid-template-columns: 100px 3em 40%;
    grid-template-rows: 20% 20% 20% 20% 20%;
}

23

#garden {
    display: grid;
    grid-template-columns: 1fr 5fr;
    grid-template-rows: 20% 20% 20% 20% 20%;
}

24

#garden {
    display: grid;
    grid-template-columns: 50px repeat(3, 1fr) 50px;
    grid-template-rows: 20% 20% 20% 20% 20%;
}

#water {
    grid-area: 1 / 1 / 6 / 2;
}

#poison {
    grid-area: 1 / 5 / 6 / 6;
}

25

#garden {
    display: grid;
    grid-template-columns: 75px 3fr 2fr
  	grid-template-rows: 100%;
}

26

#garden {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows: 50px repeat(3, 0) 1fr;
}

#water {
    grid-column: 1 / 6;
    grid-row: 5 / 6;
}

27

#garden {
    display: grid;
    grid-template: 60% 40% / 200px 1fr
}

#water {
    grid-column: 1;
    grid-row: 1;
}

28

#garden {
    display: grid;
    grid-template: 1fr 50px / 1fr 4fr;
}