css grid (网格布局)

css grid (网格布局)

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

//容器属性
    display: grid指定一个容器采用网格布局
      display: inline-grid;行内元素。
      注意，设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、	vertical-align和column-*等设置都将失效。

    grid-template-columns: 100px 100px 100px;//定义每一列的列宽
     grid-template-rows: 100px 100px 100px;  //定义每一行的行高
      grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];//定义网格线名称
      grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];//定义网格线名称允许同一根线有多个名		字，比如[fifth-line row-5]。

        grid-row-gap: 20px; //行间距
      grid-column-gap: 20px; //列间距
    缩写：grid-gap: 20px 20px; //根据最新标准，上面三个属性名的grid-前缀已经删除

    //定义区域
     grid-template-areas: 'a b c' 
                           'd . f'
                           'g h i';
    区域不需要利用，则使用"点"（.）表示。
    '注意，区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为区域名-start，终止网格线自动命名为区		域名-end。
    '比如，区域名为header，则起始位置的水平网格线和垂直网格线叫做header-start，终止位置的水平网格线和垂直	网格线叫做header-end。'
    grid-auto-flow: column;//先行后列 row先列后行
        row dense和column dense。这两个值主要用于，某些项目指定位置以后，剩下的项目怎么自动放置。
        grid-auto-rows: 50px; //不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行	高。

     justify-items: start | end | center | stretch;//属性设置单元格内容的水平位置（左中右）
      align-items: start | end | center | stretch; //属性设置单元格内容的垂直位置（上中下）
    缩写：place-items: start end

    justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
    //整个内容区域在容器里面的水平位置（左中右）
      align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
    //整个内容区域的垂直位置（上中下）。
    缩写：place-content: space-around space-evenly;

//项目属性（item）
 	grid-area: h //指定项目放在哪一个区域。
    grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
	grid-area: 1 / 1 / 3 / 3;
	

    grid-column-start属性：左边框所在的垂直网格线
    grid-column-end属性：右边框所在的垂直网格线
    grid-row-start属性：上边框所在的水平网格线
    grid-row-end属性：下边框所在的水平网格线
	grid-column-start: 2;
  	grid-column-end: 4; //指定项目位置，列宽是第2根到第4根 （也可指定的是网格线名）
	 grid-column-start: span 2;//表示列宽是2个单元格 等价于 grid-column-end: span 2; 
	缩写形式  grid-column: 1 / 3;
  				grid-row: 1 / 2;

	justify-self: start | end | center | stretch;  //设置单元格内容的水平位置（左中右）
  align-self: start | end | center | stretch; //设置单元格内容的垂直位置（上中下），
	缩写： place-self: <align-self> <justify-self>;
//关键字

	repeat('重复次数'，'重复值')
	  	grid-template-rows: repeat(3, 33.33%);
		grid-template-columns: repeat(2, 100px 20px 80px);
	auto-fill 自动填充列数/行数
		grid-template-columns: repeat(auto-fill, 100px);
	
	fr(类似flex：1的用法)如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。
	
	minmax(最小值，最大值)
	grid-template-columns: 1fr 1fr minmax(100px, 1fr);
	
	auto 关键字表示由浏览器自己决定长度。
	grid-template-columns: 100px auto 100px;


参考地址：http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html