CSS之grid栅格布局介绍及布局总结

　　css代码演示：

1. 　　*{
2. 　　margin:0;
3. 　　padding:0;
4. 　　box-sizing:border-box;
5. 　　}
6. 　　body{
7. 　　display:flex;
8. 　　/水平垂直居中/
9. 　　justify-content:center;
10. 　　align-items:center;
11. 　　/可视窗口/
12. 　　max-width:100vw;
13. 　　min-height:100vh;
14. 　　}
15. 　　.contert{
16. 　　min-width:1000px;
17. 　　display:grid;
18. 　　gap:5px;
19. 　　}
20. 　　.contert>.row{
21. 　　display:grid;
22. 　　grid-template-columns:repeat(12,1fr);
23. 　　gap:5px;
24. 　　min-height:50px;
25. 　　}
26. 　　.contert>.row>.item{
27. 　　background-color:aquamarine;
28. 　　padding:10px;
29. 　　border:1pxsolid;
30. 　　}
31. 　　/常用网格列样式/
32. 　　.col-1{
33. 　　grid-column-end:span1;
34. 　　}
35. 　　.col-2{
36. 　　grid-column-end:span2;
37. 　　}
38. 　　.col-3{
39. 　　grid-column-end:span3;
40. 　　}
41. 　　.col-4{
42. 　　grid-column-end:span4;
43. 　　}
44. 　　.col-5{
45. 　　grid-column-end:span5;
46. 　　}
47. 　　.col-6{
48. 　　grid-column-end:span6;
49. 　　}
50. 　　.col-7{
51. 　　grid-column-end:span7;
52. 　　}
53. 　　.col-8{
54. 　　grid-column-end:span8;
55. 　　}
56. 　　.col-9{
57. 　　grid-column-end:span9;
58. 　　}
59. 　　.col-10{
60. 　　grid-column-end:span10;
61. 　　}
62. 　　.col-11{
63. 　　grid-column-end:span11;
64. 　　}
65. 　　.col-12{
66. 　　grid-column-end:span12;
67. 　　}

　　个人总结：
　　经过今日自己收敲模仿12列栅格布局，我忽然发现好像打开了新世界的大门一样，这样先提前设置好然后直接在页面中运用感觉真的是太便利太快捷了吧，做出一个三列布局，直接引证，基本上写一点代码整个大体的布局就出来了，这真的是太快了吧，让我有点吃惊。一起在吃惊的一起也感觉到了代码的魅力，这样的速度真的是让我眼前一亮，回想起之前用flex布局写一个这样的三列布局，尽管说也不是特别困难，可是相关于这个grid布局来说，那真的是一个天上一个地下，完全没法比较的，一起也让我愈加坚决的要将这个布局牢牢的把握在自己的手里。
　　在加上教师今日关于整个项目的布局解说，也是让我醍醐灌顶，曾经我关于写项目的时分有点不知道怎样下手不说，一起耶斯直接写页面的，渐渐写然后渐渐改，也没有就是说写文档的习惯，可是今日教师讲了之后才知道这个过程是多么的重要，是写代码的第一步，而曾经的我从来没有这样做过，所以就造成了我每次写页面的时分感觉晕头转向，不知道从哪里下手不说，写多了有时分都不知道自己之前写的代码在什么位置，改都不好修改，这次学习之后，真的要养成写项目之前将全体的布局先写进一个文档，让自己有一个大体的思路，这样项目写起来才会愈加的迅捷与失误的几率变少。
　　还有关于flex与grid两者之间布局相联系，教师画的两张图让我有了愈加深入的感受。
　　flex：项目—->容器（是一个超大的单元格调集/网格区域）
　　grid:项目—->单元格—->容器
　　正是这样的一个图让我愈加直观的了解到了两者之间的区别与交互运用，全体的布局运用grid布局，而单行内的则运用flex布局，两个交互运用，关于布局来说愈加的便利，处理起来也愈加的简单。