CSS布局——Grid

由于需要，接触到了网格布局，于是乎，学习记录一下，参见教程CSS网格布局（Grid）完全教程

1.display:grid，就表明这是一个网格容器，其中的内容将由网格的形式展示，按行排列，宽度占满整个容器。

2.display:inline-grid，同理，按行排列，不过宽度由项目自身宽度决定，以最长的一个项目为准。

3.若要页面展示网格的效果，grid-template-rows和grid-template-columns，分别用来定义行轨道和列轨道。

grid  {   
 display: grid;   
 grid-template-rows: 50px 100px；
｝

上面，则是定义了两个item，高度分别为50px和100px，同理列轨道使用也是如此。

      其中尺寸可以是任意非负的长度，em、px、%，详细可参见之前的一个关于这部分内容的博文。此外，可以用fr来表示，即按比列分配空间，且与其他类型的单位出现时，优先级为最低，

4.minmax()用于定义轨道的最小和最大尺寸，

第一个参数表示最小轨道尺寸，第二个参数表示最大轨道尺寸。长度值可以是auto，

5.重复的网格轨道，可用repeat(重复次数，轨道尺寸)定义实现。

6.grid-column-gap 和 grid-row-gap定义网格间隙，仅限于行列间，项目与边界间无间隙。grid-gap为两者缩写。

7.可用网格线编号定位项目，顺序由上至下，由左至右，从1计数。可用属性有：

 grid-row-start和grid-row-end

    grid-column-start和 grid-column-end

grid-area（grid-row-start,grid-column-start,grid-row-end, grid-column-end）

8.项目的跨行跨列，可通过7属性指定。如：

.item1 {    grid-row-start: 1;    grid-row-end:   4;
}

也可以通过span来指定跨越行或者列的数量： grid-row： 2/span 3 ，表明从2号网格线，纵向跨越3个。

9.网格线的命名：定义网格的同时可以为网格指定名字。用法：

grid  {    
   display: grid;   
   grid-template-rows:    [row-1-start] 1fr [row-2-start] 1fr [row-2-end];    grid-template-columns: [col-1-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-3-end];
｝

这样我们也可以通过网格名定位项目啦。

10.指定项目的布局方向：grid-auto-flow: column; 默认是row行方向 布局。