带你快速了解grid布局

什么是grid布局呢？

grid布局是一种二维布局模型，先在页面上画好“虚拟格子” ，再设置元素在格子上的位置和跨度

接下来介绍一下grid的一些基础用法

• grid: auto auto auto / 1fr 200px
//设置格子， 3行2列
//auto表示长度由内容决定， 1fr表示撑满自由空间。如果2列等宽可设置 1fr 1fr；
• grid-column: 1 / span 2
//从列的第1条线开始，跨2列；等价于 grid-column: 1 / 3;
• grid-column: 1 / 2
//从列的第1条线开始，到列的第2条线结束；等价于 grid-column: 1 / span 1;
• grid-row: 1 / span 1
//从行的第1条线开始，跨1行；相当于 grid-row: 1 / 2;
• grid-row: 2 / 3
//从行的第2条线开始，到行的第3条线结束；相当于 grid-row: 2 / span 1;
• grid-area: 3/1/4/3
//从第3条行线和第1条列线开始，到第4条行线和第3条列线结束
//表示 开始的行线/开始的列线/结束的行线/结束的列线 所覆盖的范围
//grid-column、grid-row的替代写法，相当于 grid-row: 3 / 4; grid-column: 1 / 3;

接下来我们来通过一个小游戏来快速掌握grid布局吧

欢迎来到Grid Garden，在这里你需要用grid布局来种植胡萝卜花园！

游戏链接：cssgridgarden.com/ 

答案：

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/span 2;

11. grid-column:2/5;

12. grid-row-start:3;

13. grid-row:3/6;

14. grid-column:2/3; grid-row:5/6;

15. grid-column:2/span 4; grid-row:1/6;

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% 50%;

21. grid-template-columns:12.5% 12.5%;

22. grid-template-columns:100px 3em 40%;

23. grid-template-columns:1fr 5fr;

24. grid-template-columns:50px 1fr 1fr 1fr 50px;

25. grid-template-columns:75px 3fr 2fr;

26. grid-template-rows:50px 0px 0px 0px 1fr;

27. grid-template:60% 1fr/ 200px 1fr;

28. grid:1fr 50px / 20% auto;