CSS grid layout

CSS网格布局用于将页面分割成数个主要区域，或者用来定义组件内部元素间大小、位置和图层之间的关系。

像表格一样，网格布局让我们能够按行或列来对齐元素。 但是，使用CSS网格可能还是比CSS表格更容易布局。 例如，网格容器的子元素可以自己定位，以便它们像CSS定位的元素一样，真正的有重叠和层次。

示例：

 <doctype html>
 <html>
 <head>
 <title>title</title>
 <style>
 .wrapper {

   display: grid;/*网格布局*/

   grid-template-columns: repeat(3, 1fr);  /*把网格区域分成三等分为三列 "repeat(3,1fr)"等价于 "1fr 1fr 1fr */
   grid-gap: 10px;                         /*网格间隙的宽度(网格线宽度？)*/
   grid-auto-rows: minmax(100px, auto);    /*指定网格行的行高最小值为100px*/
 }
 .one {
   grid-column: 1 / 3;    /*列的范围从第一条网格线开始到第三条网格线结束，下同*/
   grid-row: 1;           /*行的范围指定为第一行单行，下同*/
   border-style:solid;    /*加边框为了便于观察，下同*/
   border-color:#f00;
 }
 .two {
   grid-column: 2 / 4;
   grid-row: 1 / 3;
   border-style:solid;
   border-color:#0f0;
 }
 .three {
   grid-column: 1;
   grid-row: 2 / 5;
   border-style:solid;
   border-color:#00f;
 }
 .four {
   grid-column: 3;
   grid-row: 3;
   border-style:solid;
   border-color:#ff0;
 }
 .five {
   grid-column: 2;
   grid-row: 4;
   border-style:solid;
   border-color:#0ff;
 }
 .six {
   grid-column: 3;
   grid-row: 4;
   border-style:solid;
   border-color:#f0f;
 }
 </style>
 </head>
 <body>
 <div class="wrapper">
   <div class="one">One</div>
   <div class="two">Two</div>
   <div class="three">Three</div>
   <div class="four">Four</div>
   <div class="five">Five</div>
   <div class="six">Six</div>
 </div>
 </body>
 </html>

result：