Css3网格布局的基础用法

                                  Css3网格布局

Css网格布局（grid）是一套基于二维页面布局系统
一、父元素相关属性以及属性值
1、网络容器（给父元素设置）
将属性display的属性值设置为grid 或者 inline-grid，就创建了一个网格容器，所有容器中的接子元素将自动成为网格项目元素。
display：grid | inline-grid
2、怎样去显示网格
（1）grid-template-rows 定义网格的行轨道
grid-template-rows：100px 100px 100px 表示三行，每一行高度为100px
（2）grid-template-coulumns 定义网格的列轨道
grid-template-coulumns:100px 100px 100px 表示为三列，每一列的width为100px
3、需要用的相关函数
（1）repeat（） 重复的网络轨道
grid-template-rows：repeat（3,100px）表示实现三行，每行高度为100px的网格
grid-template-coulumns:repeat（3,100px） 表示实现三列，每一列的宽度为100px的网格
（2）minmax（）
4、定义网格的间隙
（1）grid-column-gap
定义网格列与列之间的间隙大小
（2）grid-row-gap
定义网格的行与行之间的间隙
（3）grid-gap
定义行与行，列与列之间的间隙
grid-gap:1px；表示给行和列的间隙都添加1px的间隙
grid-gap:1px 2px; 第一个表示行间隙，第二个表示列间隙
注意点：项目与边界之间没有间隙

二、给子元素（项目）设置
1、用网格线编号来定位项目位置
用来表示网格轨道的开始个结束
（1）grid-row-start
行的开始线条
（2）grid-row-end
行的结束线条
（3）grid-colum-start
列的开始线条
（4）grid-colum-end
列的结束线条
{
grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 2;
grid-column-end: 3;
}

这是一个3行2列的网格，即在行上有4条网格线，在列上有3条网格线。项目1利用网格线编号定位在第2行第2列的位置上。
（5）grid-row
是grid-row-start 和grid-row-end的缩写
注意点：grid-row：value(开始) 或grid-row：value1(开始)/value2(结束)
（6）grid-column
是grid-column-start 和grid-column-end的缩写

注意点：grid-column：value(开始) 或grid-column：value1(开始)/value2(结束)
（7）gris-area
是grid-row-start，grid-row-end，grid-colum-start和grid-column-end的缩写形式
grid-area:2(grid-row-start)/2(grid-colum-start)/3(grid-row-end)/3(grid-column-end)
例如：
.item1 {
grid-area: 2 / 2 / 3 / 3;
}

小知识扩展：1、fr单位，用于表示轨道尺寸配额，表示按配额比例分配可用空间
例如：grid-template-columns：1fr 1fr 2fr;表示项目1占1/4的宽度，项目2占1/4的宽度，项目3占2/4=1/2的宽度