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布局，两个交互运用，关于布局来讲越发的便利，处理起来也越发的简单。