GridLayout网格布局

网格术语

网格线(Grid Lines)
网格线组成了网格，他是网格的水平和垂直的分界线。一个网格线存在行或列的两侧。我们可以引用它的数目或者定义的网格线名称。

上图突出显示的红线就是第二列的网格线（line2）

• 网格轨道(Grid Track)
  网格轨道是就是相邻两条网格线之间的空间，就好比表格中行或列。所在在网格中其分为grid column和grid row。每个网格轨道可以设置一个大小，用来控制宽度或高度。

  
  
  

  图中突出显示的就是行线line2和line3之间组成的网格轨道
• 网格单元格(Grid Cell)
  网格单元格是指四条网格线之间的空间。所以它是最小的单位，就像表格中的单元格。

图中突出显示的单元格是由行线line2、line3和列线line2、line3组成的

• 网格区域(Grid Area)
  网格区域是由任意四条网格线组成的空间，所以他可能包含一个或多个单元格。相当于表格中的合并单元格之后的区域。

  
  
  

  图中突出显示的网格区域是行线line1、line3和列线line2、line4之间的区域，其主要包括了四个网格单元格。
• 网格容器(Grid Containers)
  通过使用display属性给元素显式设置了属性值grid或inline-grid，此时这个元素将自动变成网格容器。这个类似于flexbox一样，将元素设置设置为display:flex，元素将自动变成弹性盒模型。
• 网格单元格顺序(order)
  网格单元格顺序和Flexbox模块一样，通过order属性来对网格单父元格进行顺序重排。

定义一个网格

.wrapper {
            display: grid;
            grid-template-columns: 100px 10px 100px 10px 100px 10px 100px;//列宽 列间距 列宽 列间距 列宽 列间距 列宽
            grid-template-rows: auto 10px auto 10px auto;//行高 行间距 行高 行间距 行高
        }

基于网格的占位区

对于网格线，在网格布局中有两种，一种是列线,另一种是行线。对应的个网格单元格都有列线起始线（grid-column-start）、列线终止线(grid-column-end)和行线起始线（grid-row-start）、行线终止线（grid-row-end）。

  
A
  
B
  
C
  
D
  
E

body {
  padding: 50px;
  }
.wrapper {
  display: grid;
  grid-template-columns: 100px 10px 100px ;
  grid-template-rows: auto 10px auto 10px auto;
}
.box {
  background-color: #444;
  color: #fff;
  font-size: 150%;
  padding: 20px;
  text-align: center;
}
.a{
  grid-column-start: 1;
  grid-column-end: 2; 
  grid-row-start: 1;
  grid-row-end: 2;
}
.b {
  grid-column-start: 3;
  grid-column-end: 4; 
  grid-row-start: 1;
  grid-row-end: 2; 
}
//以下为简写方式
.c { 
  grid-column: 1/2;
  grid-row: 3/4;
}
//以下为网格区域写法grid-area:row-start/column-start/row-end/column-end
.d { 
  grid-area: 3/3/4/4
}

.e { 
  grid-area:5/1/6/2
}

如下图所示：

gridLayout1.jpg