grid网格布局

1.1 容器和项目
采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）。

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

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

1.4 网格线
划分网格的线，称为"网格线"（grid line）。水平网格线划分出行，垂直网格线划分出列。
正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线，比如三行就有四根水平网格线。

父元素加的属性
2.1 display 属性
display: grid或者display: inline-grid指定一个容器采用网格布局。
注意，设为网格布局以后， 容器子元素（项目）的float、display: inline-block、 display: table-cell、vertical-align和 column-*等设置都将失效。
所有的子元素都会自动转成块状元素

2.2 grid-template-columns，grid-template-rows 属性
容器指定了网格布局以后，接着就要划分行和列。 grid-template-columns属性定义每一列的列宽， grid-template-rows属性定义每一行的行高。
除了使用绝对单位，也可以使用百分比。

  有时候，重复写同样的值非常麻烦，尤其网格很多时。这时，可以使用repeat()函数， 简化重复的值。
  repeat()接受两个参数，第一个参数是重复的次数（上例是3），第二个参数是所要重复的值。

  auto-fill 关键字
  有时，单元格的大小是固定的，但是容器的大小不确定。 如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。

  fr 关键字
  为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。 如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。
  fr可以与绝对长度的单位结合使用，这时会非常方便。

  minmax()
  minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。

  auto 关键字
  auto关键字表示由浏览器自己决定长度。

2.3 grid-row-gap，grid-column-gap，grid-gap 属性
grid-row-gap属性设置行与行的间隔（行间距）， grid-column-gap属性设置列与列的间隔（列间距）。

  grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式。
  如果只写一个值，代表两个值相等

2.4 grid-template-areas 属性
网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成。 grid-template-areas属性用于定义区域。

2.5 grid-auto-flow 属性
这个顺序由grid-auto-flow属性决定，默认值是row， 即"先行后列"。也可以将它设成column，变成"先列后行"。

2.6 justify-items，align-items，place-items 属性
justify-items属性设置单元格内容的水平位置（左中右）， align-items属性设置单元格内容的垂直位置（上中下）。
place-items属性是align-items属性和justify-items属性的合并简写形式。

2.7 grid-auto-columns，grid-auto-rows 属性
有时候，一些项目的指定位置，在现有网格的外部。比如网格只有3列，但是某一个项目指定在第5行。 这时，浏览器会自动生成多余的网格，以便放置项目。

2.8 grid-template，grid 属性

子元素加的属性
3.1 grid-column-start，grid-column-end，grid-row-start，grid-row-end 属性
项目的位置是可以指定的，具体方法就是指定项目的四个边框，分别定位在哪根网格线。
1.grid-column-start属性：左边框所在的垂直网格线
2.grid-column-end属性：右边框所在的垂直网格线
3.grid-row-start属性：上边框所在的水平网格线
4.grid-row-end属性：下边框所在的水平网格线

3.2 grid-column，grid-row 属性
grid-column属性是grid-column-start和grid-column-end的合并简写形式， grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。

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

3.4 justify-self，align-self，place-self 属性
justify-self属性设置单元格内容的水平位置（左中右）， 跟justify-items属性的用法完全一致，但只作用于单个项目
align-self属性设置单元格内容的垂直位置（上中下）， 跟align-items属性的用法完全一致，也是只作用于单个项目。

补充

vmin, vmax

vmin vw和vh里面较小的那个值
vmax vw和vh里面较大的那个值

iframe
嵌入外部网页的