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的宽度
