020day（支付宝页面制作【利用js插件除100就是rem的】，CSS3的grid布局）

一、grid（网格）布局

1、网格布局（Grid）它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局

2、grid布局相关概念

1⃣.采用网格布局的区域，称为"容器"（container）。

2⃣.容器内部采用网格定位的子元素，称为"项目"（item）。

3⃣.注意：项目只能是容器的顶层子元素，不包含项目的子元素。Grid 布局只对项目生效。

3、grid布局中的行和列

1⃣.容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）。

4、grid布局中的单元格

1⃣. 行和列的交叉区域，称为"单元格"（cell）。正常情况下，n行和m列会产生n x m个单元格。比如，3行3列会产生9个单元格。

5、grid布局中的网格线

1⃣.划分网格的线，称为"网格线"（grid line）。水平网格线划分出行，垂直网格线划分出列。

正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线，比如三行就有四根水平网格线。

右图是一个 4 x 4 的网格，共有5根水平网格线和5根垂直网格线

二、Grid布局中添加在容器（父元素）上的属性

1、display：grid；  display：inline-grid；指定一个容器采用网格布局

2、grid-template-columns 属性   设置每列的列宽

      A、grid-template-columns: 100px 100px 100px;

      B、grid-template-columns: repeat(3, 33.33%);

           repeat()接受两个参数，第一个参数是重复的次数（上例是3），第二个参数是所要重复的值。

      C、grid-template-columns: 1fr 1fr;   fr关键字（fraction 的缩写，意为"片段"）

3、grid-template-rows属性     定义每一行的行高

4、grid-gap属性是grid-column-gap和grid-row-gap的合并简写，设置行和列间距

5、place-items：place-items属性是align-items属性和justify-items属性的合并简写形式，设置单元格内容在水平垂直的对齐方式。

  justify-items/align-items: start | end | center | stretch;

6、place-content属性是align-content属性和justify-content属性的合并简写形式。设置整个内容区域在容器里面的水平和垂直位置。

  place-content: <align-content> <justify-content>。

justify-content/align-content: start | end | center | stretch | space-around | space-between | space-evenly;

7、grid-template-areas 属性  网格布局允许指定"区域"（area）

.container {

  display: grid;

  grid-template-columns: 100px 100px 100px;

  grid-template-rows: 100px 100px 100px;

  grid-template-areas:

           'a b c'

                 'd e f'

                 'g h i';

}

三、Grid项目属性(添加在子级元素上的)

1、grid-area属性指定项目放在哪一个区域

  grid-area:a1;或者

  grid-area: <row-start> / <column-start> / <row-end> / <column-end>;

2、place-self  设置项目自己的对齐方式

  place-self是align-self和justify-self的简写

  place-self：start | end | center | stretch；

四、grid和弹性布局的区别

      Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。

      Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。

附注1、利用js单位换算实现支付宝移动端页面

 js文件：

;(function(win, lib) {

var doc = win.document;

var docEl = doc.documentElement;

var metaEl = doc.querySelector('