网格布局介绍：
CSS Grid(网格) 布局（又称为 “Grid(网格)” ），是一个二维的基于网格的布局系统它的目标是完全改变我们基于网格的用户界面的布局方式。CSS 一直用来布局我们的网页，但一直以来都存在这样或那样的问题。一开始我们用表格（table），然后是浮动（float），再是定位（postion）和内嵌块（inline-block），但是所有这些方法本质上都是只是 hack 而已，并且遗漏了很多重要的功能（例如垂直居中）。Flexbox 的出现很大程度上改善了我们的布局方式，但它的目的是为了解决更简单的一维布局，而不是复杂的二维布局（实际上 Flexbox 和 Grid 能结合在一起工作，而且配合得非常好）。Grid(网格) 布局是第一个专门为解决布局问题而创建的 CSS 模块，我们终于不需要想尽办法hack 页面布局样式了。
网格布局举例及注释：
1 <!doctype html> 2 <html> 3 <head> 4 <title>grid layout</title> 5 <style> 6 .wrapper { 7 display: grid; /*定义grid布局*/ 8 grid-template-columns: repeat(3, 1fr); /*网格的列*/ 9 grid-gap: 10px; /*列和行之间的间距为10px*/ 10 grid-auto-rows: minmax(100px, auto); /* 行从最小100px到延申*/ 11 } 12 .one { /* one类 */ 13 grid-column: 1 / 3; /* 列从第一行到第三行 */ 14 grid-row: 1; /* 第一行 */ 15 } 16 17 .two { /* two类 */ 18 grid-column: 2 / 4; /* 列从第二列到第四列 */ 19 grid-row: 1 / 3; /* 行从第一行到第三行 */ 20 } 21 .three { /* three类 */ 22 grid-column: 1; /* 第一列 */ 23 grid-row: 2 / 5; /* 行从第二行到第五行 */ 24 } 25 .four { /* four类 */ 26 grid-column: 3; /* 第三列 */ 27 grid-row: 3; /* 第三行 */ 28 } 29 .five { /* five类 */ 30 grid-column: 2; /* 第二列 */ 31 grid-row: 4; /* 第四行 */ 32 } 33 .six { /* six类 */ 34 grid-column: 3; /* 第三列 */ 35 grid-row: 4; /* 第四行 */ 36 } 37 </style> 38 </head> 39 <body> 40 <div class="wrapper"> 41 <div class="one">One</div> 42 <div class="two">Two</div> 43 <div class="three">Three</div> 44 <div class="four">Four</div> 45 <div class="five">Five</div> 46 <div class="six">Six</div> 47 </div> 48 </body> 49 </html>