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佈局，兩個交互運用，關於佈局來講越發的便利，處理起來也越發的簡單。