初看CSS Grid Layout

CSS的Grid布局模型是一种双维度的布局模型。Grid布局分行列，一行或者一列叫做一轨（track）。行轨和列轨交织成网格，由框线隔开。框线不仅在网轨之间，还在网格边缘，网格的最小单元（Cell）由一个行列相交而成，若干个网格单元可以构成一个区域（area）。和Flex一样，Grid在容器和子项上有单独的设置。

在容器上指定grid-template-rows和grid-template-columns可以指定行列数目。这两个选项的值是一个序列，每个项目可以是auto或者数值（指定大小）：

.container {
display: grid; // 或者inline-gride
grid-template-rows: 20% 100px auto;
}

对于每行每列，还可以在前面或者后面使用[xxx]来指定其轨道线的标签：

grid-template-rows: [first] 20% [middle second] 100px [middle third] 20px [last] auto [end];

每个行列可有多个标签，并且标签可以用于不同的行列。对于后者，可以使用标签加计数的方式来饮用具体的轨道，比如：middle 2。

可以使用repeat()语法来指定多个轨道，比如：grid-template-columns: repeat(3, 20px [col-start]);

可以使用fr为单位，来指定非固定大小的网格单元所占剩余空间的百分比，比如：

.container {
  grid-template-columns: 1fr 50px 1fr 1fr;
}

上面的做法和grid-template-columns: auto 50px auto auto;等价。不过使用fr能够指定更多比例，比如：grid-template-columns: 1fr 50px 1fr 3fr;。

使用grid-template-areas可以指定网格模板的区域：

          grid-template-areas:
            "header header ."
            ". . side"
            ". footer footer;

可以使用类似grid-area: header的语法来把一个入网元素归置到某个区域。

grid-template-rows、grid-template-columns以及grid-template-areas可以归并到一个属性中：grid-template，其格局是grid-template: none | <grid-template-rows> / <grid-template-columns>;，下面是一个例子：

.container {
  grid-template:
    [row1-start] "header header header" 25px [row1-end]
    [row2-start] "footer footer footer" 25px [row2-end]
    / auto 50px auto;
}

上面的写法相当于：

.container {
  grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;
  grid-template-areas: 
    "header header header" 
    "footer footer footer";
}

grid-column-gap和grid-row-gap可以用来指定网格的框线大小。这两者可以归并到grid-gap属性中。在未来的浏览器实现中，grid-前缀将被去除（部分浏览器已经这么做的）。

（完）