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
Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐